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

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

不能水平放置两个巨型飞弹（引导装置）

2 个答案: