twitter-bootstrap Bootstrap 两列布局

Bootstrap two columns layout

提问by Mestowaty

I have problem with bootstrap columns. I want to do something like this picture and I don't know how to do it.

我对引导列有问题。我想做类似这张图片的东西，但我不知道该怎么做。

Thanks a lot for helping.

非常感谢您的帮助。

采纳答案by Karl Gjertsen

You could use the grid layout to give you something like:

您可以使用网格布局为您提供以下内容：

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

However, you would need to add some padding to the images to give them the white area around them.

但是，您需要为图像添加一些填充，以赋予它们周围的白色区域。

The grid layout is explained here: bootstrap grid layout

这里解释了网格布局： bootstrap grid layout

Here is a JSFiddle example.

这是一个JSFiddle 示例。

回答by jShoop

Bootstrap is made up of 12 columns in a row. If you want something to display half and half for example, the first element would have a value of six like so: class="col-xs-6"and the second would be the same. To learn bootstrap really well make thissite your best friend.

Bootstrap 由一行 12 列组成。例如，如果您想要显示一半一半的内容，则第一个元素的值应为 6，如下所示：class="col-xs-6"第二个元素将相同。要真正很好地学习引导程序，请让这个站点成为您最好的朋友。

For a demo to your solution click here

有关您的解决方案的演示，请单击此处

Here we have your HTML

在这里，我们有您的 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

CSS

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

There is probably already a class for floating objects in bootstrap I just couldn't remember exactly, so I did it manually.

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

回答by aslawin

You should create a div with two columns: left and right with same class created for columns (for example .col-md-3). Then in right column add four rows. Example is here.

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