Question

我拍了一张截图描述了我的问题。谈到引导程序，我还是比较新的，但我知道必需品。基本上，jumbotron div（带有＆＃34; welcome＆＃34;的那个）一切都很好，但我在下面创建的列和行无法无缝连接到该jumbotron div的底部，也是一个也有点宽。我认为这与网格系统有关，因为我希望文本位于页面中间，就像我在屏幕截图中一样。

以下是与此问题相关的相关代码。

＆＃13;

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

＆＃13;

可能值得一提的另一件事是我已将所有东西都包装在容器类中。包括导航栏和基本上打开身体标签后的所有内容。有想法该怎么解决这个吗？感谢

Answer 1

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

只需将mb-0课程添加到您的jumbotron就可以了！

mb-0类意味着“margin-bottom：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>

P.S。一般来说，使用!important标志不是一种好的做法，并且不鼓励使用。因为精心编写的CSS永远不需要那些。 !important标志主要用于快速测试，而不是永久性解决方案。但正如我所指出的，在这种情况下根本不需要自定义css，因为Bootstrap 4具有本机类。

Answer 2

在jumbotron或你的另一个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>

jumbotron和column divs之间的空白区域（bootstrap）

2 个答案: