html - 在网格中的所有列上设置填充

Question

我正在使用 bootstrap 3 制作网格，看起来像下图。我不可能使用 Bootstrap 4，因为它是一个拥有超过 100.000 种产品的网上商店，所以后端开发人员还没有改变它。

我的问题是关于填充。我希望所有列周围都有一个 padding:15px;。目前我给每一列 class="top-pad-d"。但是当我看手机时我遇到了问题:

因此，为了使我的填充工作，我现在必须在媒体查询中进行填充，fx 使用 class="top-pad-m"。但是控制起来越来越复杂和怪异。

对于单个列，代码将是:

<div class="col-sm-2">
     <a href="#"><img src="http://placehold.it/196x210" class="img-responsive top-pad-d top-pad-m"></a>
</div> 

有没有一种方法可以让我写一些代码 - 所有列周围都应该有 15px padding？

请注意，我不能在所有小列上设置 padding:15px;，因为它们将有一个 padding:30px;，因为顶部有 2 行彼此。

.row [class*="col-"] {
    padding-right: 7.5px;
    padding-left: 7.5px;
}
.padding-y {
    padding: 15px;
    background-color: #fff;
    margin-bottom:30px;
    border: 1px solid #ebecf0;
}
.top-pad-d {
    padding-top: 15px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Section 4 -->
<div class="section padding-y">
    <div class="row">
        <div class="col-sm-4">
            <a href="#"><img src="http://placehold.it/400x427" class="img-responsive"></a>
        </div>
        <div class="col-sm-2">
            <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
        </div>
        <div class="col-sm-2">
            <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
        </div>
        <div class="col-sm-2">
            <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
        </div>
        <div class="col-sm-2">
            <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
        </div>
        <div class="col-sm-2">
            <a href="#"><img src="http://placehold.it/196x210" class="img-responsive column-top-pad"></a>
        </div>
        <div class="col-sm-2">
            <a href="#"><img src="http://placehold.it/196x210" class="img-responsive column-top-pad"></a>
        </div>
        <div class="col-sm-2">
            <a href="#"><img src="http://placehold.it/196x210" class="img-responsive column-top-pad"></a>
        </div>
        <div class="col-sm-2">
            <a href="#"><img src="http://placehold.it/196x210" class="img-responsive column-top-pad"></a>
        </div>
    </div>
</div>

Answer 1

我已经提出了一个完整的 css 解决方案:您将不必再更改 DOM。为了获得您想要的结果，我在每一列中添加了 padding: 7.5px。现在每一列之间的距离为 7.5px + 7.5px = 15px。但是，外边缘仍然有 7.5px 的填充。这就是为什么我向 .row 类添加了 7.5px 的填充。所以现在，每列周围都有 15px 的距离。

.row [class*="col-"] {
  padding: 7.5px;
}

.row {
  background-color: #fff;
  padding: 7.5px !important;
}

.padding-y {
  margin-left: 15px !important;
  background-color: #fff;
  margin-bottom: 30px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Section 4 -->
<div class="section padding-y">
  <div class="row">
    <div class="col-sm-4">
      <a href="#"><img src="http://placehold.it/400x427" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
    <div class="col-sm-2">
      <a href="#"><img src="http://placehold.it/196x210" class="img-responsive"></a>
    </div>
  </div>
</div>

希望这对您有所帮助!