如何消除Bootstrap一行两列中含well组件的两个div间距？

嘿，我来帮你搞定这个无缝合并的需求！要让两个列里的Well完全连在一起，消除所有间距、内外边距，咱们需要针对性地覆盖Bootstrap的默认样式，具体步骤如下：

1. 移除列之间的默认内边距 #

Bootstrap的.col-*类默认带有左右padding，这是列之间间距的来源。咱们可以给父级的.row加一个自定义类，一次性去掉所有子列的padding：

/* 自定义类：消除row下所有列的左右内边距 */
.row.no-gutter [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

然后在HTML里把你的row改成：

<div class="row no-gutter">

2. 调整Well的样式，消除间距并合并边框 #

默认的Well有margin-bottom和自身的padding，而且两个相邻Well会有双重边框。咱们自定义一个类来修正这些：

/* 合并Well的核心样式 */
.well.merge-well {
    /* 去掉Well的默认外边距 */
    margin: 0;
    /* 保留上下内边距，先去掉左右内边距，后续单独调整 */
    padding: 19px 0;
}
/* 第一个Well去掉右边框，加回左侧内边距 */
.well.merge-well:first-child {
    border-right: none;
    padding-left: 19px;
}
/* 第二个Well去掉左边框，加回右侧内边距 */
.well.merge-well:last-child {
    border-left: none;
    padding-right: 19px;
}

接着给你的两个Well加上这个类：

<div class="col-md-6">
    <div class="well merge-well" style="background-color: #f0f8ff;">第一列内容</div>
</div>
<div class="col-md-6">
    <div class="well merge-well" style="background-color: #ffe4e1;">第二列内容</div>
</div>

完整示例代码 #

把这些整合起来，你就能得到无缝合并的效果了：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row.no-gutter [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}
.well.merge-well {
    margin: 0;
    padding-top: 19px;
    padding-bottom: 19px;
}
.well.merge-well:first-child {
    border-right: 0;
    padding-left: 19px;
}
.well.merge-well:last-child {
    border-left: 0;
    padding-right: 19px;
}
</style>
<div class="container">
    <div class="row no-gutter">
        <div class="col-md-6">
            <div class="well merge-well" style="background-color: #f0f8ff;">第一列的Well内容</div>
        </div>
        <div class="col-md-6">
            <div class="well merge-well" style="background-color: #ffe4e1;">第二列的Well内容</div>
        </div>
    </div>
</div>

这样调整后，两个Well就会完全贴合，视觉上像是一个整体，同时还保留了Bootstrap响应式布局的特性哦！

内容的提问来源于stack exchange，提问作者user7418416