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 3 and .col-xs-* -- Do you not need rows of 12 units?（包括用于视觉表示的图片）。

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

如果您查看代码中的第二个示例，则有 3 列，xs 断点对于所有列都有值 6。这些列的总和为18（即> 12）。

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