我目前正在使用引导程序 4。在我的代码中，由于引导两列填充，两个项目 (.items( 之间的间隙为 30px。但是容器有填充 15px。我认为如果两个项目之间的间隙是 15px，等于容器填充会更好看。我该怎么做？
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-success items'>B</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-info items'>C</div>
</div>
</div>
</div>
</body>>30px填充意味着它将分为15px左填充和15px右填充div。所以正在发生的事情是，它正在从中心的第一个(右侧填充(和第二个div(左侧填充(添加 15px 填充。所以这是解决方案：
div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'pl-0 col-sm'>
<div class = ' bg-success items'>B</div>
</div>
<div class = ' pl-0 col-sm'>
<div class = ' bg-info items'>C</div>
</div>
</div>
</div>
这是我更改的内容： 将"pl-0"引导类添加到第二和第三div。希望它有效！
您可以使用px-0简单地从中间列中删除填充...
<div class="container-fluid border">
<div class="row">
<div class="col-sm">
<div class="bg-primary items">A</div>
</div>
<div class="col-sm px-0">
<div class="bg-success items">B</div>
</div>
<div class="col-sm">
<div class="bg-info items">C</div>
</div>
</div>
</div>
或者，使用一个特殊的CSS类来覆盖Bootstrap的装订线(=7.5px(...
.p-row-sm {
margin-left: -7.5px;
margin-right: -7.5px;
}
.p-row-sm > div[class^="col"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
演示：https://www.codeply.com/go/SZcY3X4hTY
您可以使用 Bootstrap 实用程序类来解决此问题。这是我项目中的示例：
<div class="row">
<div class="col-lg-6 pr-lg-2">...</div>
<div class="col-lg-6 pl-lg-2">...</div>
</div>
这个想法非常简单：当我的屏幕足够大以显示两列时，我会应用半装订线。
请注意，我使用 1rem 排水沟，pr-lg-2/pl-lg-2给了我 .5rem 填充。您可能希望根据您的引导程序配置使用不同的值，例如pr-lg-1或pr-lg-3.
上述问题有几个问题在起作用。在移动设备(col 或 xs(上查看 BS 网格布局时，将删除容器填充。因此，两列布局的左右内部填充组合使其看起来失去平衡(列之间的填充过多(。
从理论上讲，解决方案是直截了当的。 全局删除左填充或右填充。但是，这将导致其他不平衡，如果您正在工作并且布局具有难以预测的可变数量的项目。解决方案是使用 ：nth-child(偶数/奇数(选择器删除奇数列元素上的一半右填充和偶数列元素上的一半左填充。在此处查看解决方案 BS4 减少移动设备上 2 张网格卡之间的填充