Bootstrap - 混合容器和容器流體

我目前正在構建一個網站，這是一個高分頁，分解爲每個不同部分的水平面板。Bootstrap - 混合容器和容器流體

一些水平面板固定寬度居中居中（見圖1,2,3,5），一些是全寬（見圖4中的4）。對於固定寬度，我使用「.container」類，這很容易，工作正常。對於全尺寸面板，我使用「.container-fluid」。

現在我面臨的問題是如下（參見參考圖像。）

所以面板4是全寬，並且由2列。文本內容介於B & C和C & D之間，但是有2個背景圖像跨越A到C和C到E，我無法弄清楚如何做到這一點。

我試過把它分成2列，然後在中間有一個固定寬度的部分，但不能讓它工作。這是我目前在：

<div class="container-fluid"> 
    <div class="col-sm-6"> 
     <img src="" /> 
     <div class="container"> 
     </div> 
    </div> 

    <div class="col-sm-6"> 
     <img src="" /> 
     <div class="container"> 
     </div> 
    </div> 
</div>

任何意見非常感謝。

來源

2015-10-21 IanS

編輯：新增兩列拆分爲container-fluid。

從我對你問題中顯示的圖像的理解中，我會建議將容器分開並用類或ID命名它們以刪除庫存餘量或其他將其推下的人。

<div class="container topContainer"> 
    <p>Content here</p> 
</div> 
<div class="container-fluid midContainer"> 
    <div class="row"> 
     <div class="col-sm-6 leftPad"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <p>Content here</p> 
      </div> 
      <div class="col-sm-6"> 
       <p>Content here</p> 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-6 rightPad"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <p>Content here</p> 
      </div> 
      <div class="col-sm-6"> 
       <p>Content here</p> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 
<div class="container botContainer"> 
    <p>Content here</p> 
</div>

和設置背景，使用以下CSS：

.leftPad { 
    background-image: url('example.jpg'); 
} 
.rightPad { 
    background-image: url('example2.jpg'); 
}

這應該包起來，並保持乾淨不搞亂任何東西。要調整邊距和其他展示位置，請爲我在示例中設置的自定義類實施一些CSS。

作爲提示我會說，不要在行或列中使用容器。將整個頁面包裝在一列中，並將內容本身與行和列分開以滿足您的需求。

快樂編碼！

來源

2015-10-21 10:08:02 ProDexorite

感謝ProDexorite，但我不認爲這涵蓋了從A到C和C至E有背景圖片？ – IanS

編輯答案。基本上你想做的是將容器流體分成兩列，然後將列分成兩半。通過這種方式，您可以保持響應式設計，而不必過多地使用填充和邊距。 – ProDexorite

工作過，非常感謝！ – IanS

下面是結構和使用圖像作爲容器流體格的背景圖像

<div class="container-fluid"> 
<div class="container"> 
    <div class="col-sm-6"> </div> 
    <div class="col-sm-6"> </div> 
</div> 
</div>

來源

2015-10-21 10:03:51

-1

可以在兩個容器中劃分起來，最大寬度的每個給定的50％; A-C可以被賦予一個像這樣的圖像，分成兩部分（每個50％）;

HTML

 <section id="yourImage" style="background: url(img/img.jpg) center center; background-size: cover;" > 
       <div class="left"></div> 
       <div class="right"> 
        <h1>AND NOW YOU CAN ADD TEXT HERE</h1> 
       </div> 
     </section>

CSS

 .left, .right{ 
      width: 50%; 
      float: left; 
     }

來源

2015-10-21 10:05:51 n3sutran

發現幾個解決方案，但都使用JavaScript。所以這裏是我的CSS唯一的解決方案。乾杯:)

/* just some styling for better view */ 
 

 
#mix { 
 
    background: black; 
 
    color: #fff; 
 
} 
 
.left { 
 
    background: url('https://static.pexels.com/photos/462254/pexels-photo-462254.jpeg') no-repeat center/cover; 
 
} 
 
.right { 
 
    background: url('https://static.pexels.com/photos/534020/pexels-photo-534020.jpeg') no-repeat center/cover; 
 
} 
 
.row { 
 
    border-top: 1px solid black; 
 
} 
 
.col-sm-6 { 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 
/* and this below is basically what you need */ 
 

 
@media (min-width: 768px) { 
 
    .half-container { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    max-width: 375px; 
 
    } 
 
    .left-half-container { 
 
    margin-right: -15px; 
 
    } 
 
    .right-half-container { 
 
    margin-left: -15px; 
 
    } 
 
} 
 
@media (min-width: 992px) { 
 
    .half-container { 
 
    max-width: 485px; 
 
    } 
 
} 
 
@media (min-width: 1200px) { 
 
    .half-container { 
 
    max-width: 585px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="mix"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="left col-sm-6"> 
 
     <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
     </div> 
 
     <div class="right col-sm-6"> 
 
     <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="left col-sm-6 clearfix"> 
 
     <div class="half-container left-half-container pull-right text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
     </div> 
 
     <div class="right col-sm-6 clearfix"> 
 
     <div class="half-container right-half-container pull-left text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-09-06 14:20:56 Sharak

Bootstrap - 混合容器和容器流體

回答

相關問題