Why is Bootstrap moving the last column to the next row?

Question

Given the following code with no css attached to the table, nothing modifying the row class:

<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>

Style for .itemGrid:

.itemGrid{
    text-align: center;
}

The third column (<div class="col-xs-1"></div>) is being pushed to the next row as if I had specified too many columns regardless of the viewport width. Why is this?

Answer 1

It's because your second column .col is unspecified. Try e.g.:

<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>