Почему Bootstrap перемещает последний столбец в следующую строку?

Question

Учитывая следующий код с не CSS, прикрепленной к столу, ничего не изменяя row класс:

<div class="row"> 
    <div class="itemGrid"> 
     <div class="col-xs-1"></div> 
     <div class="col"> 
      <table> 
       ... 4 TD columns, 4 tr rows, no content of fixed widths 
      </table> 
     </div> 
     <div class="col-xs-1"></div> 
    </div> 
</div> 

Стиль для .itemGrid:

.itemGrid{ 
    text-align: center; 
} 

Третья колонка (<div class="col-xs-1"></div>) подталкивают к следующей строки, как если бы я указал слишком много столбцов, независимо от ширины окна просмотра. Почему это?

Answer 1

Это потому, что ваш второй столбец .col не указан. Попробуйте т.д .:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="itemGrid"> 
 
    <div class="col-xs-1">test</div> 
 
    <div class="col-xs-10"> 
 
     <table> 
 
     ... 4 TD columns, 4 tr rows, no content of fixed widths 
 
     </table> 
 
    </div> 
 
    <div class="col-xs-1">test</div> 
 
    </div> 
 
</div>