Bootstrap столбцы толкают элементы в другой столбец вниз

Question

Пример кода для иллюстрации моей проблемы выглядит следующим образом:

<div class='body'>
<div class="container">
  <div class="col-md-12">
    <div class="col-md-6">
       Col Left 1 
    </div>
    <div class="col-md-6">
      Col Right 1 ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
   </div>
   <div class="col-md-6">
     Col Left 2
   </div>
   </div>
   </div>
   </div>

Вот как это рендерится, и разметку на скриншоте я хотел бы исправить:

В конечном счете, в моем приложении я хотел бы, чтобы мои формы и кнопки были на одной стороне, а мои данные отображались на другой стороне так:

То, что он делает, это толкает все влево вниз и создает большое пространство между элементами, как показано в примере. Как мне преодолеть это и разделить две колонки?

Answer 1

Ваш код неверен. В Bootstrap сетке столбцы должны быть обернуты строками. Вы можете переписать свой код, как показано ниже:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Col Left 1
    </div>
    <div class="col-md-6">
      Col Right 1
    </div>
    <div class="col-md-6 border border-info">
      Col Left 2
    </div>
</div>

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

bootstrap столбцы