Question

我已经做了两列。在两列之间有30px的填充。我需要将其设置为10px。在bootply.com here上查看实时示例。

在核心引导程序中，类“ 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>

Answer 1

您可以将col-sm-4的padding-right改写为7.5px，将col-sm-8的padding-left改写为7.5px。

Here是一个codepen示例。

但是，您要小心，因为在大型网站上覆盖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;
  }

2列之间的填充与其他位置的填充

1 个答案: