Html 引导列col-xs-12作为行

在使用bootstraps网格系统时，我经常面临着在更短、更整洁的代码和可能正确但更长的代码之间进行选择的问题

让我们假设以下代码

<div class="row some-class">
  <div class="col-xs-12">

    <div class="row">
      <div class="col-xs-12">
        content A
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12">
        content B
      </div>
    </div>

  </div>
</div>

内容A
内容B

在我看来，下面的代码似乎具有完全相同的结果

<div class="row some-class">
  <div class="col-xs-12">content A</div>
  <div class="col-xs-12">content B</div>
</div>

内容A
内容B

是这样吗？即使如此，使用

col-xs-12

作为行/列构造的某种快捷方式是否是一种良好的做法

---

我需要包装器

行

，因为

某些类

包含样式。

我看不出有什么错，我认为这两种方式都是正确的，而且我只在使用桌面站点时才使用

col xs-*

为什么在这里使用网格类？简单的

content a内容B

会给你同样的结果。当然，它们是等价的，而且，第二个选项显然不那么冗长（即更好：更快，更易于维护）-因此，如果你只计划为布局设置一个“断点”，那么就要想方设法使用它。当你想在布局中有一个以上的“断点”时，就会出现这种差异——即你想在

xs

中使用整个宽度，但对于想要

lg

（或其他）的大屏幕——第二个选项会给你一行，根据你的需要将A和B拆分为列（2和10、6和6等）-第一个选项强制您使用行，即使列宽不是12。