Bootstrap3是否有1行有无限列？

Question

使用Bootstrap3和网格系统.网格系统中的默认设置为12列.

写html是否有任何不良后果类似于:

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

Answer 1

这对于bootstrap来说绝对有效并且有文档标记.看看我的答案深入解释这个想法:Bootstrap 3和.col-xs-* - 你不需要12个单位的行吗？(包括用于视觉表示的图片).

从文档:

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

如果查看代码中的第二个示例,则有3列,xs断点具有6所有列的值.这些列的总和18(即> 12).

这允许您对不同断点上的不同换行符使用相同的标记.简化的想法是,您不需要为不同的视口使用不同的标记模板.实际的.rows是指南,而不是应该只允许列等于或小于12的具体实现.