Question

我正在使用bootstrap作为一个简单的个人网站，并试图弄清楚为什么用于填充列的CSS规则在不同的div上应用不同。请参阅此fiddle了解HTML和CSS - 您可以看到about me面板下面的白色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>

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

Answer 1

当你使用 col - * 类时要小心你将行 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具有负余量，可以调整col 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之后使用行 div出现填充问题

Answer 2

同意Ismail Farooq给出的答案。

bootstrap中有定义的结构。一些基本规则：

1）在行类

之前添加容器/容器流体类

2）在任何col- * class

之前添加行类

3）即使对于嵌套col- *，也要在col - *

之前添加行

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

2 个答案: