大型加速器和列divs之间的空白(引导)

Question

我拍了张截图描述我的问题。当涉及到引导时，我是相当新的，但我知道要点。基本上，巨无霸div (带有“欢迎”的那个)都很好，但是我在下面创建的列和行不能无缝地连接到这个巨型div的底部，而且也更宽一些。我认为这与网格系统有关，因为我希望文本以页面中间为中心，就像在屏幕截图中一样。

​

​

下面是有关这个问题的相关代码。

​

      <div class="jumbotron">

        <h1 class="display-4">Welcome</h1>

        <p class="lead">This is my online portfolio</p>
        <hr class="m4-4">
        <p>Sometimes, it's good to think outside the box</p>
      </div>

      <div class="row justify-content-md-center text-center bg-secondary">
        <div class="col col-6 " id="about_me">
          <h2>About Me</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada
              vel nibh at efficitur. Morbi feugiat orci in laoreet luctus. Sed dolor ipsum,
              lobortis et elit at, tempor maximus enim. Donec semper est vel lectus malesua
              da posuere. Curabitur sodales tristique leo quis scelerisque. Fusce porttitor,
              diam malesuada molestie hendrerit, tellus orci rhoncus risus, id dictum nulla
              risus consectetur orci. <p>
        </div>
      </div>

​

还有一件值得注意的事情是，我已经在容器类中包装了所有东西。包括导航条和打开车身标签之后的一切。有什么办法解决这个问题吗？谢谢

Answer 1

有一种简单的方法可以通过使用本机引导4类来删除该空间。

只需将mb-0类添加到您的巨型加速器中就可以了！

"margin-bottom:0".类mb-0的意思是所以，它从底部去掉了边距。

另外，要删除要达到的水平滚动条，请添加一个带有container-fluid类的div，如下所示：

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="jumbotron mb-0">

    <h1 class="display-4">Welcome</h1>

    <p class="lead">This is my online portfolio</p>
    <hr class="m4-4">
    <p>Sometimes, it's good to think outside the box</p>
</div>

<div class="container-fluid">
    <div class="row justify-content-md-center text-center bg-secondary">
        <div class="col col-6 " id="about_me">
            <h2>About Me</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada vel nibh at efficitur. Morbi feugiat orci in laoreet luctus. Sed dolor ipsum, lobortis et elit at, tempor maximus enim. Donec semper est vel lectus malesua da posuere. Curabitur sodales tristique leo quis scelerisque. Fusce porttitor, diam malesuada molestie hendrerit, tellus orci rhoncus risus, id dictum nulla risus consectetur orci.
                <p>
        </div>
    </div>
</div>

​

一般来说，使用!important标志并不是一种好的做法，而且是不鼓励的。因为写得好的css不应该需要这些。!important标志主要用于快速测试，而不是作为永久解决方案。但正如我所指出的，在这种情况下根本不需要定制css，因为Bootstrap 4有相应的本机类。

Answer 2

大磁控管或你的另一个div上有空白处，使它们分开。当我将margin-bottom: 0 !important;应用于.jumbotron时，它们变得更接近了。

但是，我不认为这完全解决了问题，因为您的其他div的CSS没有提供。

​

.jumbotron {
margin: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">

        <h1 class="display-4">Welcome</h1>

        <p class="lead">This is my online portfolio</p>
        <hr class="m4-4">
        <p>Sometimes, it's good to think outside the box</p>
      </div>

      <div class="row justify-content-md-center text-center bg-secondary">
        <div class="col col-6 " id="about_me">
          <h2>About Me</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada
              vel nibh at efficitur. Morbi feugiat orci in laoreet luctus. Sed dolor ipsum,
              lobortis et elit at, tempor maximus enim. Donec semper est vel lectus malesua
              da posuere. Curabitur sodales tristique leo quis scelerisque. Fusce porttitor,
              diam malesuada molestie hendrerit, tellus orci rhoncus risus, id dictum nulla
              risus consectetur orci. <p>
        </div>
      </div>

​