我制作了一个包含 2 列的行。在 2 列之间有一个 30px 的填充。我需要它是 10px。查看 bootply.com 上的实例 here .
在核心 Bootstrap 中，“col-sm-4”类的 padding-left 和 padding-right 设置为 15px，因此为 30px。我现在的问题是，我需要在列的左侧和右侧保留 15 像素。
我怎样才能使两列之间的填充更小，而不影响左侧和右侧的填充？
<style type="text/css">
.row > div{
margin-bottom: 15px;
}
.sidebar{
background: #dbdfe5;
}
.content{
background: #b4bac0;
}
.sidebar, .content{
min-height: 300px;
}
</style>
<body style="background-color: #4940fb;">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="sidebar"></div>
</div>
<div class="col-sm-8">
<div class="content"></div>
</div>
</div>
</div>
</body>
最佳答案
您可以将 col-sm-4 的 padding-right 覆盖为 7.5px，将 col-sm-8 的 padding-left 覆盖为 7.5px。
Here是一个代码笔示例。
但是，您要小心，因为在大型网站上覆盖 Bootstrap 类可能会影响其他页面/部分。如果可以，您想向 div 添加一些额外的类(例如 col-sm-4 和 small-right-padding 以及 col-sm-8 和 small-left-padding)。
所以你可以有这些规则:
.small-padding-left {
padding-left:7.5px;
}
.small-padding-right {
padding-right:7.5px;
}
关于html - 两列之间的填充影响其他地方的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51272732/