使用 Container 和 Columns 使用 Bootstrap 设置正确的边距/填充

Question

使用 Bootstrap 4.1，我花了几个小时来简单地对齐容器中的一些列。但我似乎无法正确设置边距和填充：

在大屏幕上，我想要一个 2x3 的网格，将项目装箱并在所有项目周围设置一个“框架”。但是下面发布的代码在两列之间产生了巨大的差距（假设​​为 2x 15px）。我怎样才能摆脱那个空间？！ 编辑填充和边距都不起作用。

见下面的代码 sn-p：

.test-container{
  border: solid red 1px;
  padding: 1px;
  margin: auto;
}

.item{
  border: solid 1px black;
  height: 70px;
  margin: 1px;
}

.row{
  padding: 0px;
}

<div class="container-fluid border-top bg-white shadow">
        <div class="col-sm-9 test-container">
            <div class="row">
                <div class="col-md-6">
                    <div class="item">Select Unit</div>
                </div>
                <div class="col-md-6">
                    <div class="item">Unit 1 / Unit 2</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="item">Input:</div>
                </div>
                <div class="col-md-6">
                    <div class="item">Value_Input</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="item">Output</div>
                </div>
                <div class="col-md-6">
                    <div class="item">The result is...</div>
                </div>
            </div>
        </div>
    </div>

必须有一个简单的解决方案 - 但我显然不知道。非常感谢您的帮助。

* 编辑 * 刚刚看到，代码片段生成了一个 1x6 列。显然这是我在小屏幕上想要的最终结果。然而，在大屏幕上，我希望 2x3 网格之间没有间隙。

Answer 1

您的 html 很好。默认情况下，bootstrap 中的列在 15px 的左侧和右侧有填充，行在 -15px 的左侧和右侧有填充，以在行的边缘抵消这一点。要获得您想要的结果，您需要以下 css：

.row{
  padding: 0 15px;
}

.col-md-6 {
  padding: 0;
}

这会删除列上的填充以消除列之间的间隙，而是在每行上放置 15px 的填充，以便将列压缩到您制作的测试容器中。