引導，容器，容器流體

以下是我嘗試使用引導程序來實現： -引導，容器，容器流體

紅線表示的，其中容器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

引導，容器，容器流體

回答

相關問題