Without any CSS applied to the table and no modifications made to the row
class, consider the code snippet below:
<div class="row">
<div class="itemGrid">
<div class="col-xs-1"></div>
<div class="col">
<table>
... 4 TD columns, 4 tr rows, without fixed width content
</table>
</div>
<div class="col-xs-1"></div>
</div>
</div>
The style defined for .itemGrid is as follows:
.itemGrid{
text-align: center;
}
Despite the viewport width, the third column (
<div class="col-xs-1"></div>
) appears to be moving to the next row. This behavior seems to suggest an overflow of columns, but why does this occur?