Настройка Bootstrap сетку с

Question

---

Мне нужно разработать сетку с помощью начальной загрузки, как на картинке, что у меня есть uploaded.Please помочь мне.

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