Bootstrap - Таблица Перекрытие в колонках

Question

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

• Я проверил, что мои колонки добавить до 12
• После класса «строка» там всегда класс столбец

Я добавил свой полный код в скрипкой:

https://jsfiddle.net/exubnw4a/

Как вы можете видеть, что многие из этих значений getitng сдвинуты, когда он должен быть 4 отдельные таблицы

Вот сокращенная вниз версия моего кода:

<div class="row"> 
    <div class="col-md-12"> 
     <div class="row"> 
      <div class="col-md-3"> 
      <h1>LH5</h1> 
       <table class="table"> 
       table contents here 
       </table> 
      </div> 
      <div class="col-md-3"> 
      <h1>LH5</h1> 
       <table class="table"> 
       table contents here 
       </table> 
      </div> 
      <div class="col-md-3"> 
      <h1>LH5</h1> 
       <table class="table"> 
       table contents here 
       </table> 
      </div> 
      <div class="col-md-3"> 
      <h1>LH5</h1> 
       <table class="table"> 
       table contents here 
       </table> 
      </div>   
     </div> 
    </div> 
</div> 

Answer 1

Начиная с md (средний, около 992 пикселя), основные 4 divs сокращаются до 25% из-за class="col-md-3". Удалите это, и он вернется к желаемым 100% при всех размерах. Смотрите этот скриншот, показывающий, как удаление, что заставляет его работать за столом, на котором она снимается:

Answer 2

Если вы хотите разместить 4 элемента в 1 ряд, убедитесь, что все они в то же Bootstrap класс «строка». В вашем случае вы должны поместить все свои таблицы в одну строку вместо создания новой строки для каждой таблицы.

Answer 3

Ваш стол содержит больше строк, которые занимают больше ширины, чем 25% класса col-md-3. В таких случаях вы можете использовать класс table-responsive.

SAMPLE