Bootstrap 3在容器內添加容器流體？

Question

我有一個正常的容器，並且在這個容器內我想添加一個全寬容器流體，這樣容器就是我的屏幕上的全視點。 我試過了，但它不是全寬。

<div class="container"> 

<div class="container-fluid"> 

</div> 

</div> 

根據我的說法，容器流體是整個容器的整個寬度，而不是屏幕。任何方式來覆蓋它？

Answer 1

不能使用.container-fluid一個.container內，並得到你想要達到的目標。查看Bootstrap的.container類的代碼;它有一個固定的寬度。

您需要使用.container-fluid固定寬度容器的外部。

下面是一個例子：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <p>Some Content</p> 
     </div> 
    </div> 
</div> 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <p>Item 1</p> 
     </div> 

     <div class="col-md-4"> 
      <p>Item 2</p> 
     </div> 

     <div class="col-md-4"> 
      <p>Item 3</p> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <p>Some More Content</p> 
     </div> 
    </div> 
</div> 

這是完全可以接受的整個網站有多個集裝箱，無論你需要利用一個引導電網。

Answer 2

嘗試添加row而不是container-fluid。

<style> 
.container { background: #ccc;} 
.fullwidth { background: #000;} 
</style>  
<div class="fullwidth"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <p>content</p> 
     </div> 
     </div> 
    </div> 
    </div>