Bootstrap 4 引导程序4：列之间的奇怪间隙

按照我想做的样式，我在Jumbotron下面有一个容器。容器中填充了一行，其中包含此处的所有内容。该行被分为两列-带“hay”的框和下面的导航栏。另一个专栏包含了入门资料的主要部分。正如您所看到的，列没有正确地延伸到容器的末端

开始
主标注
这是主详图索引。这里可能发生了一些有趣的事情。
由于最近发生的事件，我们采取了

改用这个

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

为了你的干草
为了你的开始

除非要细分子div，否则不应该需要嵌套的

行

div，而且由于

行

类带有内置的负边距（

-15px

位于左侧和右侧），如果不需要，可能只会使css对齐更加复杂

引导开发中的最佳实践是使用

行

div，并将列div放在它下面，这样它们加起来就是12。您已经定义了一个

col-3

（“hey”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 -->

干草


类别








开始
主标注
这是主详图索引。这里可能发生了一些有趣的事情。
由于最近发生的事件，我们采取了

下面是一些正在工作的东西的示例（工作代码如下）。在结构和设计上有几个问题。首先，每页只能有一个

.container

（通常）。从：

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

其次，在使用

.row

s和

.col

s时，您应该更加自觉。奇怪的间距（主要）是由行和列的不对中造成的

最后，应用于背景的样式应该应用于

.col

本身，而不是出现在其中的组件。这是因为

.col

s的周围有一个缓冲区（

padding

）。其中的元素不能接触

.col

的边缘（如果不编写额外的规则并违反样式库）

现在，对于工作代码：

@font-face{
字体系列：“mainFont”；
src:url（'roundedMain.woff2'）格式（'woff2'）；
}
.导航箱{
填充：50px；
}
.侧边栏{
背景图像：重复线性渐变（135度，#F6F7F8，#F6F7F8 5px，#F4F6F6 5px，#F4F6F6 10px）；
边框：1px实心#F6F7F8；
}
.内容正文{
填充顶部：20px；
背景#F8F9FA；
}
李国伟{
字体大小：13px；
字体大小：400；
线高：24px；
背景#F8F9FA；
左侧填充：50px；
颜色：黑色；
}
.导航标题{
背景：白色！重要；
字体大小：粗体！重要；
颜色：#228AE6！重要；
填充顶部：0！重要；
填充底部：0！重要；
}
.导航垂直a{
颜色：#4B5259；
}
.导航垂直a：悬停{
颜色：#72C3FC；
}
.导航标题{
字体大小：粗体；
颜色：#228AE6；
填充：8px；
背景：白色；
}
琼伯伦先生{
页边距底部：0px！重要；
背景：#228AE6！重要；
边界半径：0！重要；
颜色：#FFF；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
高度：250px；
}
身体{
字体系列：'mainFont'，Arial，无衬线；
背景#F1F3F5；
}
.bd标注{
填充：1.25rem；
最高保证金：1.25雷姆；
保证金底部：1.25雷姆；
边框：1px实心rgb（255、255、255）；
左边框宽度：5rem；
背景：#E8F7FF；
边界半径：.25rem
}
.bd标注h4{
边际上限：0；
边缘底部：.25rem；
字体大小：600px；
线高：30px；
颜色：#495057；
字体大小：20px；
}
.bd标注p：最后一个孩子{
底线：0
}
.bd标注代码{
边界半径：.25rem
}
.bd标注+.bd标注{
边缘顶部：-.25rem
}
.bd标注信息{
左边框颜色：#72C3FC；
}
.bd标注信息h4{
颜色：#5bc0de
}
.bd调出警告{
左边框颜色：#f0ad4e
}
.bd标注警告h4{
颜色：#f0ad4e
}
.bd呼叫危险{
左边框颜色：#d9534f
}
.bd标注危险h4{
颜色：#d9534f
}

你好，世界！












衣钵
这是一个简单的英雄单元，一个简单的jumbotron风格的组件，用于唤起对特色内容或信息的额外关注