Бутстрап 3 | Содержимое в столбце толкает другой столбец вниз

Question

Поэтому я попытался создать окно с двумя боковыми полями в начальной загрузке и столкнулся с этой проблемой.

Если содержимое моего большого блока содержимого слишком длинное, оно выталкивает второй блок.

Я использую простой Bootstrap 3 без пользовательских стилей сетки.

<div class="container">

<div class="row">

<div class="col-md-8">
</div>

<div class="col-md-offset-1 col-md-3">
</div>

<div class="col-md-offset-9 col-md-3">
</div>

</div>

</div>

Вот два скриншота, чтобы визуализировать, каковы мои цели и что я на самом деле получаю.

Моя цель

Что я получаю

Заранее спасибо!

Answer 1

Единицы сетки Bootstrap основаны на процентах. Каждая единица имеет ширину 8,33% (1/12 от 100%). Ваши первые два div.cols добавить до 100% ширины:

.col-md-8 = 66,67%

.col-md-offset-1.col-md-3 = 8,33% + 25%

66,67 + 8,33 + 25 = 100%

Вот почему ваш третий div.col переносится на новый "ряд".

Поскольку столбцы могут быть вложенными, вот как я бы решил вашу проблему:

<div class="container">
  <div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-offset-1 col-md-3">
      <div class="row">
       </div class="col-xs-12"></div>
       </div class="col-xs-12"></div>
      </div><!-- .row -->
    </div><!-- .col -->
  </div><!-- .row -->
</div><!-- .container -->