帶有容器流體和容器的引導3中的網格

我一直在使用html/css一段時間。我從來沒有遇到這種與Bootstrap 3的網格問題。我試圖找到一種方法來結合50％寬度（在<div class="container-fluid">內）和50％寬度div（在<div class="container">內）。就像下面的圖片網格：帶有容器流體和容器的引導3中的網格

Example of the template

黃色覆蓋：<div class="container"></div>

的問題是，他們不會一起工作寬度的原因。

那麼我該如何模擬這個？

<section> 
    <div class="container-fluid"> 
     <div class="col-sm-12 col-md-6 no-padding"></div> 
     <div class="container"> 
      <p>content</p> 
     </div> 
     </div> 
     <div class="col-sm-12 col-md-6 no-padding photo"></div> 
    </div> 
</section>

來源

2016-05-04 shgzon

我有同樣的問題 - 你找到解決辦法了嗎？ – Arerrac

如果我理解你要達到的目標，那麼有幾個問題。首先，你仍然需要一個行div來包裝這些列，這些列依次嵌套在容器中。另外，默認情況下，容器會有一些填充，所以需要使用一些基本的CSS來移除。

下面是HTML結構

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-6" id="left"> 
     Left Side 
    </div> 
    <div class="col-lg-6" id="right"> 
     Right Side 
    </div> 
    </div> 
</div>

而且，這裏是一個活生生的例子，你可以玩：http://www.bootply.com/MKe7aJwKuc

讓我知道如果我錯過了你想要做什麼，我和馬克可以嘗試重做並幫助你。

來源

2016-05-04 20:16:22

感謝您的快速回復，但我在示例中遺漏了容器「1170 px width」結構。我的整個網站有一個'class =「容器」'結構。在您的示例中，我無法在1170像素的基礎結構內製作這些div上的內容。 – shgzon

應該是這個模式

<section> 
    <div class="container-fluid"> 

     <div class="col-sm-12 col-md-6 no-padding"></div> 
     <div class="col-sm-12 col-md-6 no-padding photo"></div> 

     <div class="container"> 
      <div class= "row"> 
       <div class="col-sm-12 col-md-6 no-padding">Content</div> 
       <div class="col-sm-12 col-md-6 no-padding photo"></div> 
      </div> 
     </div> 

    </div> 
</section>

來源

2016-05-04 20:17:35 scaisEdge

我相信「容器」和「容器流體」不應該是可嵌套的，請在文檔中找到它：「請注意，由於填充等原因，兩個容器都不可嵌套」（https://getbootstrap.com/docs/3.3/CSS /＃概述容器）。 –

@AleksandarBelic ..已嘗試過，我多次嵌套'容器流體'和'容器沒有'沒有特別的問題.. 如果有必要，只需調整序列的填充.container-flud> .container – scaisEdge

帶有容器流體和容器的引導3中的網格

回答

相關問題