引导两列布局 [英] Bootstrap two columns layout

问题描述

我对引导程序列有问题.我想做类似的事情 这张照片，我不知道该怎么做.

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

非常感谢您的帮助.

推荐答案

您可以使用网格布局为您提供类似的东西:

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

这是一个 JSFiddle示例.

这篇关于引导两列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！