自定义引导网格

Question

我需要使用bootstrap设计网格，就像我上传的图片一样。请帮帮我。

Answer 1

我想的是

<div class="col-sm-4">
   <div class="content-here">
       <img src="img1.jpg" />
   </div>
</div>
<div class="col-sm-8">
    <div class="boxes">
       Box 1
    </div>
    <div class="boxes">
       Box 2
    </div>
    <div class="boxes">
       Box 3
    </div>
    <div class="boxes">
       Box 4
    </div>
</div>

CSS

.content-here { height: 400px; }
.boxes { float:left; width:50%; height:200px; }

Answer 2

网格系统代码可能如下所示：

 <div class="row">
        <div class="col-sm-4">
           <img src="example.jpg">
        </div>
        <div class="col-sm-4">
           <div class="col-sm-12">
              <img src="example.jpg">
           </div>
           <div class="col-sm-12">
              <img src="example.jpg">
           </div>
        </div>
        <div class="col-sm-4">
           <div class="col-sm-12">
              <img src="example.jpg">
           </div>
           <div class="col-sm-12">
              <img src="example.jpg">
           </div>
        </div>
    </div>

之后，您可以指定每个图像的宽度和高度。如果您希望图像采用整个宽度（意味着占据列的所有空间），则可以设置width:100%。