引导，容器，容器流体

以下是我尝试使用引导程序来实现： -引导，容器，容器流体

红线表示的，其中容器DIV是。

我遇到的问题是背景颜色。因此，举例来说，如果我做了如下： -

<div class="container-fluid"> 

     <div style="background: #888;" class="col-md-8"> 
      left content 
     </div> 

     <div style="background: #999;" class="col-md-4"> 
      right content 
     </div> 

    </div>

背景是我多么希望他们，但“左内容”和“正确的内容”会再不是“容器”里休息一下就好了下图所示的网站为内容的： -

我怎么能做到这一点？

我会进一步解释，如果这不够清楚，谢谢。

来源

2016-01-20 nsilva

你的意思是用 “不insode容器” 是什么，他们是在容器中，不他们？顺便说一句。容器流体不是引导程序3中的类（过期和删除），并且您缺少行... container> row> col –

@ DennisHeiden'.container-fluid'肯定是引导程序3.它是全宽容器，而'.container'具有最大宽度。 – Brian

是的，你是对的我已经混合了行流体，我很抱歉，你仍然错过了这一行：http://getbootstrap.com/css/ –

一种解决方案是翘曲的容器，并添加一个渐变背景给它。只有当两列彼此相邻时，才能看到该背景。

CSS

@media (min-width: 992px) { 
    .wrap { background: linear-gradient(to right, #888 0%, #888 50%, #999 50%, #999 100%); } 
}

HTML

<div class="wrap"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-8" style="background: #888;"> 
     Left content 
     </div> 
     <div class="col-md-4" style="background: #999;"> 
     Right content 
     </div> 
    </div> 
    </div> 
</div>

JSFiddle

来源

2016-01-21 01:29:04

我认为那将是这种情况，谢谢你。 – nsilva

不客气。 –

尝试这种

<div class="container-fluid"> 
 
<div class="row"> 
 
     <div style="background: #888;" class="col-md-8"> 
 
      left content 
 
     </div> 
 

 
     <div style="background: #999;" class="col-md-4"> 
 
      right content 
 
     </div> 
 
</div> 
 
</div>

来源

2016-01-20 22:05:00 skander

引导，容器，容器流体

回答

相关问题