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

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

Bootstrap3是否有1行有无限列？

1 个答案: