html - Bootstrap 网格列填充在 div 标签上的应用不同

Question

我正在为一个简单的个人网站使用 bootstrap，并试图弄清楚为什么用于列填充的 CSS 规则在不同的 div 上应用不同。请看这个fiddle对于 HTML 和 CSS - 您可以看到关于我面板下方的白色 div 更宽。它们具有相同的列类，所以我无法确定为什么它会对它们产生不同的影响。

这是 HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row name-header">
    <span class="col-xs-12">Tracy King</span>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
    <div class="row-panel">
      <p>About Me</p>
    </div>
  </div>
  <div class="content-panel col-xs-12 col-lg-8 col-lg-offset-2">
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
      veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
      ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
      consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
      porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
      velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
      magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
      exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
      consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
      esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
      voluptas nulla pariatur?"</p>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
    <div class="row-panel">
      <p>Code Samples</p>
    </div>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
    <div class="row-panel">
      <p>Sample Apps</p>
    </div>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
    <div class="row-panel">
      <p>Other Projects</p>
    </div>
  </div>
</div>

我在 fiddle 中包含了一些自定义 CSS。我认为在那里查看它可能会更有帮助，但如果需要，我可以将其移至我的问题。提前致谢。非常感谢任何见解!

Answer 1

当你使用 col-* 类时要小心，你将 row div 放在它们之前

例子

<div class="row">
    <div class="col-md-12 col-lg-8"></div>
   <div class="col-md-12 col-lg-4"></div>
</div>

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

基本上，行 div 具有负边距，用于调整列 div 的填充。

所以你必须使用标准结构 Bootstrap ，即

<div class="container">
  <div class="row">
    <div class="col-md-12 col-lg-8"></div>
    <div class="col-md-12 col-lg-4"></div>
  </div>

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

在你的情况下，你没有在出现填充问题的 name-header 类 div 之后使用 row div