在单个元素上结合Bootstrap的col和row类

Question

在单个元素上结合Bootstrap的col和row类

16

一：

 <div class="row">
   <div class="col-md-12">
      <div class="row">
       . 
       .
      </div>
    </div>
 </div>

二：

 <div class="row">
   <div class="col-md-12 row">
   .
   .
  </div>
 </div>

这两种实现方式是相同的吗？我能使用这两种方法来减少标记吗。

- mask man

2个回答

0

1. 如果您需要在一行中使用多个 .col-，则可以按照以下方式编写...

<div class="row">
    <div class="col-md-6">
        .
        .
        .
    </div>
    <div class="col-md-6">
        .
        .
        .
    </div>
</div>

2. if you need to divide  `.col-` in more `.col` then

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6">
                .
                .
                .
            </div>
            <div class="col-md-6">
                .
                .
                .
            </div>
        </div>
    </div>
    <div class="col-md-6">
     .
     .
    </div>
</div>

- Devansh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SW4 · Accepted Answer

根据 Bootstrap 的 API 文档，在 嵌套列 时，任何列的 .col 类都应该嵌套在一个 .row 类所在的元素中。这两个类不应该在单个元素中组合使用。

除了语义上更加合理之外，还要注意的是，这两个类影响的基础 CSS 属性都依赖于这种结构。

此外，请注意，单独使用 col-md-12 时，你实际上正在创建一个全宽度元素（而行本身也是全宽度的）。在这种情况下，使用网格布局可能不相关，除非你有其他元素在不同的屏幕尺寸下显示或起作用。 正确用法（如果同时使用其他列和 col-md-12）：

 <div class="row">
   <div class="col-md-12">
      <div class="row">
       . 
       .
      </div>
    </div>
 </div>

错误：

 <div class="row">
   <div class="col-md-12 row">
   .
   .
  </div>
 </div>

如果你只想要一个宽度占满整个屏幕的元素，那么无需使用网格布局，或者可以减少一层嵌套。