Bootstrap 两列布局答案

【问题标题】：Bootstrap two columns layout [closed]Bootstrap 两列布局
【发布时间】：2016-02-03 13:09:38
【问题描述】：

我对引导列有疑问。我想做类似的事情这张图，我不知道怎么弄。

非常感谢您的帮助。

【问题讨论】：

你能发布代码示例，或者解释一下你到目前为止所做的尝试吗？
我尝试在 pingendo 中执行此操作，但这只是我使用此编辑器工作的开始。而且我没有代码。我尝试做两列，在第二列中做另一列，但它不起作用。
Twitter bootstrap 3 two columns full height的可能重复

【解决方案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。

【讨论】：

【解决方案2】：

Bootstrap 由连续 12 列组成。例如，如果您想要显示一半一半的内容，第一个元素的值将是 6，如下所示：class="col-xs-6"，第二个元素将是相同的。要真正学习引导程序，请让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; 
}

引导程序中可能已经有一个用于浮动对象的类，我记不清了，所以我手动完成了。

【讨论】：

【解决方案3】：

您应该创建一个包含两列的 div：left 和 right，并为列创建相同的类（例如 .col-md-3）。然后在右栏中添加四行。例如here。

【讨论】：