Bootstrap 4：列之间的奇怪间隙

Question

按照我正在尝试制作的样式，我在 Jumbotron 下方有一个容器。容器中填满了一行，其中包含了这里的所有内容。该行分为两列 - 带有“干草”的框和下方的导航栏。另一列包含入门内容的主要部分。如您所见，该列没有正确拉伸到容器的末端。

            <div class="col content-body">
              <div class="row">
                <h1>Getting Started</h1>
                <div class="bd-callout bd-callout-info">
                        <h4>Primary Callout</h4>
                        This is a primary callout. And some interesting stuff might be occuring here.
                        <p> Due to recent events we have taken</p>
                </div>
            </div>
         </div>
    </div>

我开始使用不同的 html 代码，不同之处在于“开始”的主要内容仅包含在一个列中，而不是由行 div 包围。

            <div class="col content-body">
                <h1>Getting Started</h1>
                <div class="bd-callout bd-callout-info">
                        <h4>Primary Callout</h4>
                        This is a primary callout. And some interesting stuff might be occuring here.
                        <p> Due to recent events we have taken</p>
                </div>
            </div>
    </div>

结果是

这里整个内容部分都移动了一个间隙..

我是 bootstrap 的新手，我一生都无法弄清楚发生了什么。我的自定义 CSS 很少，几乎没有一个会修改边距或填充（我已经全部测试过了）。我还尝试插入一个中间列（这样它们都加起来为 12） - 中间列和内容列排列得很好，但仍然存在小间隙，并且两者都因间隙量而硬性偏移。

如何让它正确对齐？谢谢。

这里是建议的整个事情的小提琴：https://jsfiddle.net/0v8fL5fz/1/

Answer 1

我在该容器周围稍微更改了您的代码。将content-body 类放在第二列内的另一个潜水中。我输入了col-md-*，但您也可以使用简单的col-*。

<div class="col-md-9">
    <div class="content-body">
        <h1>Getting Started</h1>
        <div class="bd-callout bd-callout-info">
            <h4>Primary Callout</h4>
                This is a primary callout. And some interesting stuff might be occuring here.
            <p> Due to recent events we have taken</p>
        </div>
    </div>
</div>

根据this here，容器元素会取消行元素的填充，通常会在容器下放置一行。

所以这会发生并且是行元素的正常行为。但是，当您将类与列一起放入时，您在 content-body 类中放入的颜色已被列容器溢出。正如我在div 中放入的类，它现在将出现在里面。但是两列之间的间距将保持不变。

如果您想消除整个间距，您可以使用 !important 标记取消 col 类的填充，方法是将其放入您的 CSS 中并与 col-* 类一起调用这些类。

.padding-9 {
     padding-left: 0px !important;
     padding-right: -15px !important;
}

.padding-0 {
     padding-left: -15px !important;
     padding-right: 0px !important;
}

内边距必须更改 15 像素，因为行类已经有 15 像素的内边距。检查this here 如果你不明白，请再看一遍。

现在将这些与 col-* 类相应地放在一起。

<div class="col-md-3 padding-0">
    <div class="nav-box text-center">
        hay
    </div>
   <!-- Rest of the content -->
</div>

<div class="col-md-9 padding-9">
      <div class="content-body">
          <h1>Getting Started</h1>
          <div class="bd-callout bd-callout-info">
              <h4>Primary Callout</h4>
              This is a primary callout. And some interesting stuff might be occuring here.
              <p> Due to recent events we have taken</p>
          </div>
      </div>
</div>

这是一个完整的小提琴 -> link

Answer 2

这是一个link 表示正在工作的东西（工作代码如下）。结构和设计存在一些问题。首先，您应该每页只有一个.container（通常）。来自docs：

虽然容器可以嵌套，但大多数布局不需要嵌套容器。

其次，您应该更加注意使用.rows 和.cols。奇怪的间距（主要）是由行和列的未对齐引起的。

最后，您为背景应用的样式应该适用于.cols 本身，而不是出现在其中的组件。那是因为.cols 周围有一个缓冲区（padding）。其中的元素不能触及.col 的边缘（无需编写额外的规则并违反您的样式库）。

现在，对于工作代码：

@font-face {
  font-family: 'mainFont';
  src: url('roundedMain.woff2') format('woff2');
}

.nav-box {
  padding: 50px;
}

.sidebar {
  background-image: repeating-linear-gradient(135deg, #F6F7F8, #F6F7F8 5px, #F4F6F6 5px, #F4F6F6 10px);
  border: 1px solid #F6F7F8;
}

.content-body {
  padding-top: 20px;
  background: #F8F9FA;
}

.nav-vert li {
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  background: #F8F9FA;
  padding-left: 50px;
  color: black;
}

.nav-title {
  background: white !important;
  font-weight: bold !important;
  color: #228AE6 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nav-vert a {
  color: #4B5259;
}

.nav-vert a:hover {
  color: #72C3FC;
}

.nav-title {
  font-weight: bold;
  color: #228AE6;
  padding: 8px;
  background: white;
}

.jumbotron {
  margin-bottom: 0px !important;
  background: #228AE6 !important;
  border-radius: 0 !important;
  color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 250px;
}

body {
  font-family: 'mainFont', Arial, sans-serif;
  background: #F1F3F5;
}

.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgb(255, 255, 255);
  border-left-width: 5rem;
  background: #E8F7FF;
  border-radius: .25rem
}

.bd-callout h4 {
  margin-top: 0;
  margin-bottom: .25rem;
  font-weight: 600px;
  line-height: 30px;
  color: #495057;
  font-size: 20px;
}

.bd-callout p:last-child {
  margin-bottom: 0
}

.bd-callout code {
  border-radius: .25rem
}

.bd-callout+.bd-callout {
  margin-top: -.25rem
}

.bd-callout-info {
  border-left-color: #72C3FC;
}

.bd-callout-info h4 {
  color: #5bc0de
}

.bd-callout-warning {
  border-left-color: #f0ad4e
}

.bd-callout-warning h4 {
  color: #f0ad4e
}

.bd-callout-danger {
  border-left-color: #d9534f
}

.bd-callout-danger h4 {
  color: #d9534f
}

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>

  <body>
    <div class="container">
      <nav class="navbar sticky-top navbar-light bg-light row">
        <ul class="nav d-flex flex-column flex-sm-row col">

          <li class="nav-item">
            <a class="navbar-brand" href="#">Logo</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </nav>

      <div class="jumbotron row">
        <div class="col">
          <h1 class="display-4">Mantle</h1>
          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        </div>
      </div>

      <div class="row">
        <div class="col-3 sidebar">
          <div class=" nav-box text-center">
            hay
          </div>
          <ul class="nav nav-vert flex-column">
            <li class="nav-item nav-title">
              <div class="nav-link">CATEGORY</div>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="#">Menu Item</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Get Started</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
          </ul>
        </div>
        <div class="col-9 content-body">
          <h1>Getting Started</h1>
          <div class="bd-callout bd-callout-info">
            <h4>Primary Callout</h4>
            This is a primary callout. And some interesting stuff might be occuring here.
            <p> Due to recent events we have taken</p>
          </div>
        </div>

      </div>
    </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>

</html>

另外，正如@ZimSystem 所说，只有.cols 应该是.rows 的直系祖先。来自docs：

在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。

Answer 3

改用这个

 <div class="row">
  <div class="col-sm-4">for your hay</div>
  <div class="col-sm-8">for your getting started</div>
</div> 

Answer 4

你不应该需要嵌套的row div，除非你正在细分子 div，并且由于 row 类带有内置的负边距（-15px 在左侧和右侧），很可能仅在不需要时才使您的 css 对齐更加复杂。

Bootstrap 开发中的最佳实践是使用 row div，将列 div 放在它下面，以便它们加起来为 12。您已经定义了 col-3（“嘿”div），所以您只需需要为更大的 div（“开始”）添加列大小，以便它展开并占据整行。

<div class="container">
    <div class="row mx-0">
        <div class="col-3 px-0">
            <div class=" nav-box text-center">
                hay
            </div>
            <div>
                    <ul class="nav nav-vert flex-column">
                                <li class="nav-item nav-title">
                                    <div class="nav-link">CATEGORY</div>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link active" href="#">Menu Item</a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">Get Started</a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">Pricing</a>
                                </li>
                        </ul>
            </div> <!-- ul wrapper div -->
        </div> <!-- col-3 -->
        <div class="col-9 content-body">
                <h1>Getting Started</h1>
                <div class="bd-callout bd-callout-info">
                        <h4>Primary Callout</h4>
                        This is a primary callout. And some interesting stuff might be occuring here.
                        <p> Due to recent events we have taken</p>
                </div>
          </div> <!-- col-9 -->
    </div> <!-- row -->
</div> <!-- container -->