Bootstrap 3 and .col-xs-* — Do you not need rows of 12 units?

后端 未结 3 2182
悲哀的现实
悲哀的现实 2021-02-14 09:47

I\'m a little confused by the Bootstrap 3 documentation and thus usage of the .col-xs-* classes.

The docs for Grid Options say that all of the grid systems

3条回答
  •  后悔当初
    2021-02-14 10:13

    Bootstrap is a 12 column rid, but you can put more than 12 columns in a row. The remaining columns will simply wrap onto the next line below, depending on the viewport.

    In this example, on "md" viewports (≥992px), the contents would span 12 columns total (8 + 4). But on "xs" (<768px) the content would span 18 columns, there would be one full row (12 columns) and then below it a half-row (6 columns).

    .col-xs-12 .col-md-8
    .col-xs-6 .col-md-4

    md...

    |    8   |  4 |
    

    xs...

    |     12     |
    |   6  |  
    

    EDIT: Make sure to check out the Responsive Column Reset section of the documentation if you run into any issues with columns not wrapping correctly.

提交回复
热议问题