Как лучше сверстать блоки разной высоты на Bootstrap?

226

28 апреля 2018, 15:10

Прошу прощения за мой дилетантский вопрос:

Есть макет сайта вот такого плана:

Все блоки на сайте размещены сеткой, у каждого блока высота равна или x, или 2x, или 3x, ширина тоже - y, или 2y.

Пробую сделать на Bootstrap, но, из-за высоты, бутстрап размещает 4-й блок не под 2-м, а под первым, с новой строки. Пример: https://www.codeply.com/go/dwyEv5gprw

Подскажите, как решить данный вопрос? Заранее спасибо!

Answer 1

Это особенности 4-го Бутстрапа. Поэтому у Вас 2 варианта: либо просто подключить 3-й, и тогда всё заработает (только колонкам padding: 0 !important надо задать):

.col-lg-4, .col-lg-8{ 
    padding: 0 !important; 
} 
p{ 
    text-align: center; 
    font-size: 24px; 
} 
.feature{ 
  border: 1px solid black; 
} 
 
.height1{ 
  height: 150px; 
} 
.height2{ 
  height: 300px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<section id="features"> 
    <div class="container"> 
      <div class="row"> 
 
        <div class="col-lg-4"> 
          <div class="feature height2"> 
              <p>1</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>2</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>3</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>4</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>5</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>6</p> 
          </div> 
        </div> 
         
        <div class="col-lg-8"> 
          <div class="feature height1"> 
              <p>7</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>8</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>9</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>10</p> 
          </div> 
        </div> 
 
      </div> 
    </div> 
  </section>

Либо если по каким-то причинам нужен именно 4-й бутстрап, переопределите в стилях поведение row и col-

.row { 
  display: block !important; 
} 
.col-lg-4, .col-lg-8{ 
padding: 0 !important; 
float: left !important; 
} 
p{ 
text-align: center; 
font-size: 24px; 
} 
.feature{ 
  border: 1px solid black; 
} 
 
.height1{ 
  height: 150px; 
} 
.height2{ 
  height: 300px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"  
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> 
<section id="features"> 
    <div class="container"> 
      <div class="row"> 
 
        <div class="col-lg-4"> 
          <div class="feature height2"> 
              <p>1</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>2</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>3</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>4</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>5</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>6</p> 
          </div> 
        </div> 
         
        <div class="col-lg-8"> 
          <div class="feature height1"> 
              <p>7</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>8</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>9</p> 
          </div> 
        </div> 
         
        <div class="col-lg-4"> 
          <div class="feature height1"> 
              <p>10</p> 
          </div> 
        </div> 
 
      </div> 
    </div> 
  </section>