Bootstrap兩列布局

Question

我有引導列的問題。我想在此picture中執行類似 的操作，我不知道如何操作。 非常感謝您的幫助。

Answer 1

您可以使用網格佈局，給你這樣的：

<div class="row"> 
    <div class="col-xs-6"> 
    <div>Big Image Goes Here</div> 
    </div> 
    <div class="col-xs-6"> 
    <div class="col-xs-12">Little Image #1</div> 
    <div class="col-xs-12">Little Image #2</div> 
    <div class="col-xs-12">Little Image #3</div> 
    <div class="col-xs-12">Little Image #4</div> 
    </div> 
</div> 

但是，你需要一些填充添加到圖片給他們周圍的白色區域。

網格佈局如下解釋： bootstrap grid layout

這裏是一個JSFiddle example。

Answer 2

您應該創建一個帶有兩列的div：左側和右側爲列創建的同一類（例如.col-md-3）。然後在右欄添加四行。示例是here。

Answer 3

Bootstrap由12列組成。例如，如果你想要顯示一半和一半的東西，第一個元素的值將是6，如下所示：class="col-xs-6"，第二個元素是相同的。學習bootstrap真的很好使this網站成爲你最好的朋友。

對於演示，您的解決方案點擊here

在這裏，我們有你的HTML

<div class="col-xs-7 left"> 
    <img src="http://placehold.it/300x500"> 
</div> 
<div class="col-xs-5 right"> 
    <img src="http://placehold.it/200x100"> 
</div> 
<div class="col-xs-5 right"> 
    <img src="http://placehold.it/200x100"> 
</div> 
<div class="col-xs-5 right"> 
    <img src="http://placehold.it/200x100"> 
</div> 
<div class="col-xs-5 right"> 
    <img src="http://placehold.it/200x100"> 
</div> 

CSS

.left{ 
    float: left; 
} 
.right{ 
    float: right; 
} 
div{ 
    padding: 20px; 
} 

有可能已經對我真不敢在引導漂浮物類完全不記得，所以我手動完成了。