Question

希望有人可以帮助我摆脱代码中的这个空白。我已尝试为*{margin:0}和p标记设置pre和相同，但这并非真正有用。我正在使用BS4。代码是

    <div class="jumbotron container context" style="padding-bottom:3; padding-top:40">
<h1 class="bg-info">aaa</h1>
<pre>fsfsdfsd
fasfdds
fdsfsfsd
fdsfasdfsd
fdsfsdf
</pre>
</div><div class="jumbotron container" style="padding:0;">
<div class="carousel slide" data-interval="false" id="carousel_controls">
    <div class="carousel-inner">
    <div class="carousel-item active">
        <a href="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" target="_blank">
        <img class="img-fluid img-thumbnail rounded mx-auto d-block" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
        </a>
    </div>
    <a class="carousel-control-prev" data-slide="prev" href="#carousel_controls" role="button">
        <span aria:hidden="true" class="carousel-control-prev-icon"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" data-slide="next" href="#carousel_controls" role="button">
        <span aria:hidden="true" class="carousel-control-next-icon"></span>
        <span class="sr-only">Next</span>
    </a>
    </div>
</div>

从屏幕截图中可以看出，我正试图摆脱红色框中的空白区域。

jsfiddle

Answer 1

这是因为.jumbotron上应用了保证金底部。你只需要覆盖那种风格

.jumbotron {
  margin-bottom: 0px;
}

但是，如果你将另一个类添加到不会有边缘底部的jumbotrons，那将是一个好主意。例如

.jumbotron.your-custom-class { margin-bottom: 0px}

Answer 2

Bootstrap 4具有本机类，用于处理所有间距需求。并且建议您使用Bootstrap类（而不是css hacks），因为css hacks倾向于需要更多的css hacks来解决原始css hacks引起的问题。

要单独使用Bootstrap 4类解决问题，只需将mb-0类添加到jumbotron类。那就是它！

mb-0表示＆＃34; margin-bottom：0＆＃34;并且将产生期望的效果，而不需要任何不必要的css hacks。

我还用原生的Bootstrap 4类替换了你的其他一些css，看看它让你的代码看起来更干净（点击下面的＆＃34;运行代码片段＆＃34;按钮并展开到整页）：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="jumbotron container context mb-0 pb-5 pt-5">
    <h1 class="bg-info">aaa</h1>
    <pre>fsfsdfsd
    fasfdds
    fdsfsfsd
    fdsfasdfsd
    fdsfsdf
    </pre>
</div>
<div class="jumbotron container p-0">
    <div class="carousel slide" data-interval="false" id="carousel_controls">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <a href="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" target="_blank">
                    <img class="img-fluid img-thumbnail rounded mx-auto d-block" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
                </a>
            </div>
            <a class="carousel-control-prev" data-slide="prev" href="#carousel_controls" role="button">
                <span aria:hidden="true" class="carousel-control-prev-icon"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" data-slide="next" href="#carousel_controls" role="button">
                <span aria:hidden="true" class="carousel-control-next-icon"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

＆＃13;

pb-5表示＆＃34;填充底部5个单位＆＃34 ;; pt-5是＆＃34;填充前5个单位＆＃34;并且p-0是＆＃34;填充：0＆＃34;在周围。

有关间距类的更多信息：

https://getbootstrap.com/docs/4.0/utilities/spacing/

请注意，您的轮播目前无法正常工作，我保留了不变的代码，因为这不是您的问题，但如果您想修复它，请查看此页面：

https://getbootstrap.com/docs/4.0/components/carousel/

Answer 3

也许你会遇到另一个问题：<div class="jumbotron container context" style="padding-bottom:3; padding-top:40">

padding-bottom:3; padding-top:40

当在css中设置值（填充，边距，宽度，高度......）时，它应具有类似（px，％，em ...），更多信息the length of css - css tricks或css-unit的尺寸。

也许修复：＆＃34; padding-bottom：3px;填充顶：40像素＆＃34;

需要一些帮助摆脱两个div标签之间的空白区域

3 个答案: