col-md-8 показан в другой строке

Question

Я пытаюсь использовать col-md-4 и col-md-8 в одной строке, но col-md-8 помещается вниз col-md-4, я пробовал без класса управления формой с тем же результатом

 <div class="container">
        <div class="col-md-4 col-sm-12 option-container ">
            <select id="tables" class="form-control">
                <option value="-1" disabled selected>Selecciona una tabla</option>
                <?php
                    foreach($tables as $table){
                        echo "<option>".$table."</option>";
                    }
                ?>
            </select>
        </div>
        <div class="col-md-8">
                    test text
        </div>

Я не знаю, что не так

Answer 1

Попробуйте добавить элемент div с классом строки

<div class="container">
   **<div class="row">**
      <div class="col-md-4 col-sm-12 option-container ">

Answer 2

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

<div class="container">
  <div class="row"> <!-- REQUIRED element -->
    <div class="col-md-4">
      One of two columns
    </div>
    <div class="col-md-8">
      One of two columns
    </div>
  </div>
</div>

В вашем коде .row элемент отсутствует.

Строки являются обертками для столбцов.Каждый столбец имеет горизонтальное заполнение (называемое желобом) для управления пространством между ними.Этому отступу затем противодействуют строки с отрицательными полями.Таким образом, все содержимое ваших столбцов визуально выравнивается по левой стороне.

Answer 3

Используйте class="row" после container класса и закройте перед контейнерным классом.