Question

我有一个包含两篇文章的文章，每篇文章都被归类为“col-xs-6”。两篇文章都很好地配对，占据了全宽在此之后，我有一个旁边和一个页脚，每个被归类为“col-xs-12”;然而，这些有点害羞的全宽但是当我将他们的类更改为“col-xs-13”时，它变为全宽。我知道我可以将所有类更改为“col-s-12”并解决问题，但如果2 xs-6文章添加到全宽，那么单个xs-12不应该这样做吗？为什么不？

body {
  background: #F0E68C;
  text-align: left;
}
header {
  background: green;
}
nav {
  background: blue;
}
section {
  background: orange;
}
article {
  background: red;
}
aside {
  background: yellow;
}
footer {
  background: orange;
}
section {
  background: pink;
}

<body class="container-fluid">
  <header class="jumbotron bg-primary text-center">
    <nav>
      <ul>
        <li>Your menu</li>
      </ul>
    </nav>
  </header>
  <section class="row">
    <article class="col-xs-6">
      <header>
        <h2>Article title</h2> 
        <p>Posted on
          <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time>by <a href="#">Writer</a> - <a href="#comments">6 comments</a>
        </p>
      </header>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </article>
    <article class="col-xs-6">
      <header>
        <h2>Article title</h2> 
        <p>Posted on
          <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time>by <a href="#">Writer</a> - <a href="#comments">6 comments</a>
        </p>
      </header>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </article>
  </section>
  <aside class="row col-xs-13">
    <h2>About section</h2> 
    <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </aside>
  <footer class="row col-xs-13">
    <p>Copyright 2009 Your name</p>
  </footer>

Answer 1

Bootstrap col-*-*类定义添加15px padding-left和padding-right。标准的Bootstrap 3样式表中不存在col-*-13，因此没有应用列填充使其看起来更全宽，因为row左边和右边的负边距-15px有效扩展它需要的空间。

col-*-*上的这些正填充与row类定义的负边距相结合，可确保网格正常运行。我会避免删除它们。

如果您需要使元素看起来更“全宽”，而是在标准container大小调整内。您可以尝试在自定义类中包装元素，并为其提供背景/模式/等。

从Bootstrap文档：

列通过填充创建装订线（列内容之间的间隙）。那   padding在第一列和最后一列的行中通过负数偏移   .rows上的边距。

负边距是以下示例缩进的原因。就是这样   网格列中的内容与非网格内容对齐。

Answer 2

但是当我将他们的类改为“col-xs-13”时，它变成了全宽。

这是因为col-xs-13类没有在bootstrap css上设置宽度。所以默认情况下它占用全宽，因为你放置的元素是块元素。

我知道我可以将所有类更改为“col-s-12”并修复问题，但如果2 xs-6文章添加到全宽，不应该单xs-12做同样的事情？为什么不呢？

这是因为你已将col-xs-12类与row类放在一起。 row类应该是父类，以使col-*-*类起作用。

所以从这个：

  <aside class="row col-xs-13">
    <h2>About section</h2> 
    <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </aside>
  <footer class="row col-xs-13">
    <p>Copyright 2009 Your name</p>
  </footer>

要：

  <div class="row">
    <aside class="col-xs-12">
      <h2>About section</h2>
      <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </aside>
    <footer class="col-xs-12">
      <p>Copyright 2009 Your name</p>
    </footer>
  </div>

为什么bootstrap允许我使用col-xs-13而不是col-xs-12？

2 个答案: