2列之间的填充，影响其他地方的填充答案

【问题标题】：Padding between 2 columns with affect padding elsewhere2列之间的填充，影响其他地方的填充
【发布时间】：2018-07-10 19:26:43
【问题描述】：

我做了一行 2 列。在 2 列之间有一个 30px 的填充。我需要它是10px。请参阅 bootply.com here 上的实时示例。

在核心引导程序中，“col-sm-4”类的padding-left 和padding-right 设置为15px，因此为30px。我现在的问题是，我需要在列的左侧和右侧保留 15 px。

如何使两列之间的填充更小，而不影响左右两侧的填充？

<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？
感谢您的评论。这将是最好的解决方案，这一点非常重要。必须使用列设置的页面每天都会被许多人访问。您的建议是解决问题的最佳方法吗？
如果您要求“最好”的方式，而不是要求固执己见的答案。这是 SO 想要避免的事情
这将 100% 解决您的问题，但是，您要小心，因为在大型网站上覆盖 Bootstrap 类可能会影响其他页面/部分。如果可以，您想添加一些div 的额外类（例如 col-sm-4 和 small-right-padding 以及 col-sm-8 和 small-left-padding。

标签： html css twitter-bootstrap

【解决方案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;
  }

【讨论】：

非常感谢您的回答，感谢您的宝贵时间。我能感觉到我在为此自己开设课程时感觉更好。我试图查看您更新的 bootply，但我看不到代码有任何变化，还是只有我一个人？
如果您要弄乱 Bootstrap .col 左右填充，请记住您还必须更新 .row 的负左右边距
对不起。我已经更新了我的答案。以前从未使用过 bootply.com。
嗯，我只是看不出这是如何不从站点中删除填充的。您是否有时间将代码放入 jsfiddle 或其他东西中？我现在刚刚试了一下，但似乎删除了列左侧的填充
您可以使用工作代码笔检查我的更新答案codepen.io/florinsimion/pen/XBWoRG