css - 如何使用 no-gutter 删除列之间的空间

Question

我使用以下代码设置两个列，但它们之间是一个空格。如何删除空间。如您所见，我正在使用“无排水沟”。

看图片： https ://ibb.co/80zTh60

<section id="incubator">
    <div class="overlay">
    <div class="row no-gutters">
        <div class="col-xs-12 col-md-6 incu-color rebeccapurple">

        </div>
        <div class="col-xs-12 col-md-6 incu-img">
            <img src="img/Facility/dedicated.jpg" alt="De">
        </div>
    </div>
    </div>      
</section>

#incubator{
    padding: 0;
    text-align: center;
    margin: 0;
}
.incu-color{
    height: 400px;
}
.incu-color.rebeccapurple{
    background-color: rebeccapurple;
}
.incu-img img{
    position: absolute;
    display: block;
    top: -100px;
    right: 0;
    height: 500px;
    max-width: 100%;
}
.incu-text{
    width: 100%;
    padding: 10px;
    background-color: darkorchid;
}

Answer 1

您需要从引导程序默认带来的 col-md-6 中删除填充。

您可以通过定义一个新类来轻松做到这一点：

.nopadding {
    padding: 0 !important;
 }

并将其应用于包含 col-md-6 类的元素。或者，正如评论中所指出的，如果您使用的是 bootstrap 4，请使用已经存在的类p-0。

HTML：

     <section id="incubator">
    <div class="overlay">
    <div class="row no-gutters">
        <div class="col-xs-12 col-md-6 incu-color rebeccapurple nopadding">

        </div>
        <div class="col-xs-12 col-md-6 incu-img nopadding">
            <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="De">
        </div>
    </div>
    </div>      
</section>