Bootstrap3 is it valid for 1 row to have infinity columns?

问题

Using Bootstrap3 and the grid system. The default settings are 12 columns in the grid system.

Is there any adverse outcomes to writing html similar to:

<div class="row">
    <div class="col-md-12">...</div>
    <div class="col-md-12">...</div>
    <div class="col-md-12">...</div>
    <div class="col-md-12">...</div>
    <div class="col-md-12">...</div>
    <div class="col-md-12">...</div>
    <div class="col-md-12">...</div>
    <div class="col-md-12">...</div>
    <div class="col-md-12">...</div>
</div>

<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4 hidden">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4 hidden">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4 hidden">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4 hidden">...</div>
</div>

回答1:

This is absolutely valid and documented markup for bootstrap. Have a look at my answer explaining this idea in depth: Bootstrap 3 and .col-xs-* -- Do you not need rows of 12 units? (includes pictures for a visual representation).

From the documentation:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

If you look at the second example in the code, there are 3 columns, and the xs breakpoint has the value 6 for all columns. The sum of those columns being 18 (ie > 12).

This allows you to use the same markup for different row breaks on different breakpoints. The simplified idea is that you don't need to have different markup templates for different viewports. The actual .rows are guidelines, not concrete implementations that should only allow for columns equal to or less than 12.

来源：https://stackoverflow.com/questions/23014782/bootstrap3-is-it-valid-for-1-row-to-have-infinity-columns

标签

html

css

twitter-bootstrap

twitter-bootstrap-3

grid-layout