Question

我的bootstrap列有问题。我想做点什么在这个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

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

在bootstrap中可能已经有一个浮动对象的类我不能完全记住，所以我手动完成了。

Answer 3

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

Bootstrap两列布局

3 个答案: