引导4：列

Question

在我试图制作的风格中，我在这里有一个Jumbotron下的容器。容器中填充了一行，其中包含所有内容。该行分为两列 - 带有＆＃39; hay＆＃39;的框和下面的导航栏。另一篇专栏文章主要介绍了入门的内容。如您所见，该列不能正确地伸展到容器的末端。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

，结果是

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

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

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

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

Answer 1

使用此代替

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

Answer 2

除非你要细分子div，否则你不应该需要嵌套的row div，因为row类带有内置的负边距（左边是-15px如果你不需要它，它很可能只会使你的css对齐变得更复杂。

Bootstrap开发中的最佳做法是使用row div，并在其下方添加列div，以便它们加起来为12.您已经定义了col-3（＆＃39;嘿＆ ＃39; div），因此您只需要为更大的div添加列大小（＆＃39;开始使用＆＃39;），以使其展开并占据整行。

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

Answer 3

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

  

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

其次，你应该更加清醒地使用.row和.col。奇怪的间距（主要）是由行和列的错位引起的。

最后，您申请背景的样式应该适用于.col本身，而不是它们中出现的组件。这是因为.col周围有一个缓冲区（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所说，只有.col s应该是.row s的直接祖先。来自docs：

  

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

Answer 4

我在那个容器周围改了一下你的代码。将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，容器元素将取消行元素＆＃39;填充物通常在一个容器下放置一排。

所以这会发生，并且是行元素的正常行为。但是当您将该列与列一起放入时，您放入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;
}

由于行类已经具有15px的填充，因此填充必须改变15px。检查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>

这是一个完整的小提琴 - ＆gt; link