在行外使用 twitter bootstrap 列 类 是个好主意吗？
Is using twitter bootstrap column classes outside rows a good idea?
我正在努力改进我的项目的 HTML 结构，我发现了一些类似的东西：
<div class="full-sidebar">
<div class="col-xs-12"></div>
</div>
其中 "full-sidebar" 是自定义 class。
我一直想知道的是：这样做是个好主意吗？将列 div 包装成一行会更好吗？只是感觉 "wrong" 以当前方式完成。
我至少知道使用一行的一个原因。
"cols-" 是浮动的，将它们排成一行会在所有列之后添加一个清晰的。这可以防止后续内容可能与您的专栏重叠。此外，它还确保行的高度等于列内容的高度。如果您不清除列的容器，则容器将不会在其自身高度中包含该列。
请注意，"col-" 仅在宽度大于 992px 时浮动。因此，您只会 运行 遇到超出该限制的内容重叠问题。看到这个 fiddle.
HTML:
<div class="norow">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
CSS:
.row {
border: 2px solid yellow;
}
.norow {
border: 2px solid green;
}
.col-md-6 {
height: 50px;
border: 2px solid red;
}
此外，正如其他人所提到的，col padding 和 margins 旨在与 row padding 和 margins 结合使用。
您应该始终将 <div class="col-xs-12"></div> 包裹在 <div class="row"></div> 内。
理由一
那就是 bootstrap grid-system。我们使用 bootstrap 来使布局干净且响应迅速。 这样做不会造成任何伤害。
原因 2
如果你不在 <div class="row"></div> 内换行，一旦你的布局变长，不久的将来会产生不必要的问题。您将无法跟踪您的布局。
所以，如果您没有充分的理由不这样做，通常最好将其包裹在 <div class="row"></div> 中。
希望对您有所帮助！
Is using twitter bootstrap column classes outside rows a good idea?
没有
Bootstrap col-* 只能在 row 中使用。来自文档..
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
另见：Bootstrap Rows and Columns - Do I need to use row?
实际上，在行外使用 bootstrap 列 class 并不是标准程序。它可能会扰乱列设计的布局。在 bootstrap css 文件中，每一列 class 根据其用途分配了不同的宽度百分比。如果您在行 class 之外使用列 class，它可能会形成与 bootstrap 规定的实际布局不同或混乱的布局。所以这不是一个好的做法。
网格系统规则
Bootstrap 由 w3Schools.com
指定的一些网格系统规则
- 行必须放置在
.container (fixed-width) 或 .container-fluid (full-width) 内，以便正确对齐和填充
- 使用行创建水平列组
- 内容应放在列中，并且只有列可以是行的直接子项
- 预定义的class像
.row和.col-sm-4这样的东西可以用来快速制作网格布局
- 列通过填充创建间距（列内容之间的间隙）。第一列和最后一列的填充通过
.rows 上的负边距在行中偏移
- 通过指定您希望跨越的 12 个可用列的数量来创建网格列。例如，三个相等的列将使用三个
.col-sm-4
我正在努力改进我的项目的 HTML 结构，我发现了一些类似的东西：
<div class="full-sidebar">
<div class="col-xs-12"></div>
</div>
其中 "full-sidebar" 是自定义 class。
我一直想知道的是：这样做是个好主意吗？将列 div 包装成一行会更好吗？只是感觉 "wrong" 以当前方式完成。
我至少知道使用一行的一个原因。
"cols-" 是浮动的，将它们排成一行会在所有列之后添加一个清晰的。这可以防止后续内容可能与您的专栏重叠。此外，它还确保行的高度等于列内容的高度。如果您不清除列的容器，则容器将不会在其自身高度中包含该列。
请注意，"col-" 仅在宽度大于 992px 时浮动。因此，您只会 运行 遇到超出该限制的内容重叠问题。看到这个 fiddle.
HTML:
<div class="norow">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
CSS:
.row {
border: 2px solid yellow;
}
.norow {
border: 2px solid green;
}
.col-md-6 {
height: 50px;
border: 2px solid red;
}
此外，正如其他人所提到的，col padding 和 margins 旨在与 row padding 和 margins 结合使用。
您应该始终将 <div class="col-xs-12"></div> 包裹在 <div class="row"></div> 内。
理由一
那就是 bootstrap grid-system。我们使用 bootstrap 来使布局干净且响应迅速。 这样做不会造成任何伤害。
原因 2
如果你不在 <div class="row"></div> 内换行，一旦你的布局变长，不久的将来会产生不必要的问题。您将无法跟踪您的布局。
所以，如果您没有充分的理由不这样做，通常最好将其包裹在 <div class="row"></div> 中。
希望对您有所帮助！
Is using twitter bootstrap column classes outside rows a good idea?
没有
Bootstrap col-* 只能在 row 中使用。来自文档..
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
另见：Bootstrap Rows and Columns - Do I need to use row?
实际上，在行外使用 bootstrap 列 class 并不是标准程序。它可能会扰乱列设计的布局。在 bootstrap css 文件中，每一列 class 根据其用途分配了不同的宽度百分比。如果您在行 class 之外使用列 class，它可能会形成与 bootstrap 规定的实际布局不同或混乱的布局。所以这不是一个好的做法。
网格系统规则 Bootstrap 由 w3Schools.com
指定的一些网格系统规则- 行必须放置在
.container(fixed-width) 或.container-fluid(full-width) 内，以便正确对齐和填充 - 使用行创建水平列组
- 内容应放在列中，并且只有列可以是行的直接子项
- 预定义的class像
.row和.col-sm-4这样的东西可以用来快速制作网格布局 - 列通过填充创建间距（列内容之间的间隙）。第一列和最后一列的填充通过
.rows 上的负边距在行中偏移
- 通过指定您希望跨越的 12 个可用列的数量来创建网格列。例如，三个相等的列将使用三个
.col-sm-4