Question

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

在大屏幕上，我需要一个2x3的网格，其中的项目被装箱，所有项目周围都带有一个“框架”。但是下面发布的代码却在两列之间产生了巨大的差距（大约2x 15px）。我如何摆脱那个空间？编辑填充或边距均无效。

请参见下面的代码段

.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很好。引导程序中的列默认在左侧和右侧填充15px，行在左侧和右侧填充-15px，以在行边缘对此进行补偿。要获得所需的结果，您需要以下CSS：

sudo systemctl restart nginx

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

热门使用容器和列通过Bootstrap设置正确的边距/填充

1 个答案: