巨无霸与列div(引导程序)之间的空白 [英] White space between jumbotron and column divs (bootstrap)

问题描述

我拍了一张截图，描述了我的问题.关于引导程序，我还很陌生，但我知道要点.基本上，jumbotron div(带有"welcome"的那个)都很好，但是我在下面创建的列和行没有无缝连接到该jumbotron div的底部，并且宽度也稍宽一些.我认为这与网格系统有关，因为我希望文本像在屏幕截图中一样位于页面中间.

I took a screenshot describing my issue. I am fairly new when it comes to bootstrap but I know the essentials. Basically, the jumbotron div (the one with "welcome") is all fine, but the columnns and rows that I create underneath don't seamlessly connect to the bottom of that jumbotron div, and is also a bit wider as well. I figure this has something to do with the grid system, as I want the text centered in the middle of the page like I have it in the screenshot.

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

Below is the relevant code pertaining to this issue.

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

还有一件值得一提的事情是，我将所有内容都包装在了容器类中.包括导航栏和打开body标签后的所有内容.有想法该怎么解决这个吗?谢谢

One more thing that might be worth mentioning is that I have wrapped everything inside the container class. Including the nav bar and basically everything after the opening body tag. Any ideas on how to fix this? Thanks

推荐答案

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

There is a simple way to remove that space by using the native Bootstrap 4 classes.

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

Just add the mb-0 class to your jumbotron and that's it!

mb-0类的意思是"margin-bottom:0" .因此，它消除了底部的边距.

The mb-0 class means "margin-bottom:0". So, it removes the margin from the bottom.

此外，要删除到达那里的水平滚动条，请添加具有container-fluid类的div，如下所示:

Also, to remove the horizontal scrollbar that you are getting there, add a div with the container-fluid class like so:

<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为此提供了本机类.

P.S. Using !important flags, in general, is not a good practice and is discouraged. Because well-written css should never need those. !important flags are primarily meant for quick testing, not as a permanent solution. But as I pointed out, there's no need for custom css in this case at all because Bootstrap 4 has native classes for that.

这篇关于巨无霸与列div(引导程序)之间的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！