Css 引导-我们必须使用行和列吗？

让我用两个例子来解释：

<div class="row">
  <h1>Title</h1>
  <div class="col-md-12">Content</div>
</div>

标题
内容

vs

标题
内容

这些例子过于简化了，但我的问题是，所有的东西都必须在一根柱子内吗？或者，在需要的地方，它们可以坐在外面吗？另一个例子：

<div class="row">
  <div class="col-md-6 col-sm-6">
    <img src="img/Police2-600x250.jpg" class="full-width">
      <div class="col-md-12 news">
        <p class="date">POSTED <strong>01 APRIL</strong></p>
        <h3>Heading</h3>
        <p>This is a summary of what the story is about like a subheading to catch your attention. Blah blah blah b l a h blah blah.</p>
      </div>
    </div>
    <div class="col-md-6 col-sm-6">
      <img src="img/Police2-600x250.jpg" class="full-width">
        <div class="col-md-12 news">
          <p class="date">POSTED <strong>01 APRIL</strong></p>
          <h3>Heading</h3>
          <p>This is a summary of what the story is about like a subheading to catch your attention. Blah blah blah b l a h blah blah.</p>
        </div>
    </div>
</div>

于4月1日发布
标题
这是一个故事的总结，就像一个副标题，吸引你的注意。废话废话废话

于4月1日发布
标题
这是一个故事的总结，就像一个副标题，吸引你的注意。废话废话废话

我不希望图像受到任何填充，但我确实希望它下面的内容

它们可以放在一列之外，但这样做会牺牲填充。Bootstrap的

.row

样式将

左边距

和

右边距

设置为-15px；

.col-…

类在每一侧都用15px的填充来弥补这一缺陷

为了弥补这个不足，您必须手动将这个15px的填充添加到非

.col-…

元素中

尽管如此，您的

h1

没有理由不能成为

.col-…

本身：

<div class="row">
  <h1 class="col-md-12">Title</h1>
  <div class="col-md-12">Content</div>
</div>

标题
内容

它们可以坐在柱子外面，但这样做会牺牲填充。Bootstrap的

.row

样式将

左边距

和

右边距

设置为-15px；

.col-…

类在每一侧都用15px的填充来弥补这一缺陷

为了弥补这个不足，您必须手动将这个15px的填充添加到非

.col-…

元素中

尽管如此，您的

h1

没有理由不能成为

.col-…

本身：

<div class="row">
  <h1 class="col-md-12">Title</h1>
  <div class="col-md-12">Content</div>
</div>

标题
内容

如果要使用引导的网格，是，则列必须是行的直接子级，内容应放在列中。从引导文档

内容应该放在列中，并且只能放在列中 行的直接子行

---

如果要使用引导的网格，yes，则列必须是行的直接子级，并且内容应放在列中。从引导文档

内容应该放在列中，并且只能放在列中 行的直接子行

---

---

如果你试着举一个简单的例子，你就会发现其中的差别。第一个标题与内容的边距不同。所以，如果你使用一个专栏或非负票，这是很重要的，因为这是一个非常糟糕的地方@目的地感谢您的评论。我的意思是从严格基于代码的角度来看，而不是从理论上。道歉。如果你尝试一下你的简单例子，你就会发现其中的差别。第一个标题与内容的边距不同。所以，如果你使用一个专栏或非负票，这是很重要的，因为这是一个非常糟糕的地方@目的地感谢您的评论。我的意思是从严格基于代码的角度来看，而不是从理论上。抱歉。让我们把美学排除在外——纯粹从结构的角度来看，是否最好将所有内容都包含在一个列中？@pee2pee没有必要这样做。不过，它们是为了协同工作而设计的。我已经更新了我的答案以包含其他内容。谢谢：-）最后一个问题，嵌套列不带行是否合理？@pee2pee嵌套列将导致额外的填充。如上所述，

.row

去掉边距，

.col-…

用填充来弥补边距。如果我们把这两个都归类为位置，我们可以说一个独立的

.row

给出了-15的位置；内部带有

.col-…

的

.row

给出了0的位置；一个

.row

和一个

.col-…

嵌套的

.col-…

将给出一个15的位置（因为没有

.row

可以把它拿走）。让我们把美学放在它之外-纯粹从结构的角度来看，最好把所有东西都包含在一列中吗？@pee2pee没有理由这样做。不过，它们是为了协同工作而设计的。我已经更新了我的答案以包含其他内容。谢谢：-）最后一个问题，嵌套列不带行是否合理？@pee2pee嵌套列将导致额外的填充。如上所述，

.row

去掉边距，

.col-…

用填充来弥补边距。如果我们把这两个都归类为位置，我们可以说一个独立的

.row

给出了-15的位置；内部带有

.col-…

的

.row

给出了0的位置；带有嵌套

.col-…

的

.row

和

.col-…

的

.row

将给出一个15的位置（因为没有

.row

将其移除）。因此列可以是列的子列，只要它们位于另一个

行

标记中。。然后我得到了我不想要的填充是的，不确定你到底想要实现什么，但这是推荐的引导方法。否则，填充将执行此操作：因此列可以是列的子级，然后是，只要它们位于另一个

行中

标记中。。然后我得到了我不想要的填充是的，不确定你到底想要实现什么，但这是推荐的引导方法。否则，填充将执行以下操作：