Bootstrap3对于1行有无限列有效吗？ [英] Bootstrap3 is it valid for 1 row to have infinity columns?

问题描述

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

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

是否有类似于写入html的不利结果：

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>

推荐答案

这是绝对有效的，看看我的回答，深入解释这个想法： Bootstrap 3和.col-xs- * - 你不需要12行的行吗？（包括用于视觉表示的图片）。

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

从文档：

<!-- 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列， $ c> xs 断点对于所有列具有值 6 。这些列的总和 18 （即> 12）。

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

这允许您使用相同的标记在不同断点处的不同行断点。简化的想法是，您不需要为不同的视口有不同的标记模板。实际的 .row 是指南，而不是只允许列等于或小于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.

这篇关于Bootstrap3对于1行有无限列有效吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！