Question

让我用两个例子来解释：

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

VS

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

示例过于简化但我的问题是，所有内容都必须在列中或需要的地方，它们是否可以放在外面？另一个例子：

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

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

Answer 1

他们可以坐在列之外，但在这样做时你会牺牲填充。 Bootstrap的.row样式集margin-left和margin-right到-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>

Answer 2

如果要使用Bootstrap的网格是，则列必须是行的直接子项，并且内容应放在列中。来自Bootstrap文档...

http://getbootstrap.com/css/#grid-intro

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

Bootstrap - 我们必须使用行和列吗？

2 个答案: