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; 
} 

有可能已经对我真不敢在引导漂浮物类完全不记得，所以我手动完成了。