无法水平地安装两个Jumbotron(引导带)

Question

我刚开始自举，很难让两个巨无霸坐在一排(中间没有空位)。无论我使它们各自的列有多小，它们都保持在不同的行上。

以下是我的HTML：

<div class="col no-gutters">
    <div class="col-md-6">
        <div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
            <div class="container">
            <h1 class="display-4">Title</h1>
            <p class="lead">Description. Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
            <div class="container">
            <h1 class="display-4">Active</h1>
                <br>
            </div>
        </div>
    </div>
</div>

我没有破坏默认的引导CSS。提前谢谢！

Answer 1

包含div的类应该是row，而不是col。

<div class="row no-gutters">

Answer 2

默认情况下，引导程序的Grid系统具有列间距(填充)。有几种方法可以解决这个问题，以适应您的需求。

一种方法可以是添加一个新的CSS选择器，然后相应地修改HTML。

CSS：

/* Add this */
.no-padding {
    padding-right:0;
    padding-left:0;
}

HTML：

<div class="col">
    <div class="col-md-6 no-padding"> <!-- add no-padding -->
        <div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
            <div class="container">
            <h1 class="display-4">Title</h1>
            <p class="lead">Description. Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 no-padding"> <!-- add no-padding -->
        <div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
            <div class="container">
            <h1 class="display-4">Active</h1>
                <br>
            </div>
        </div>
    </div>
</div>