时间戳

首页 > 解决方案 > 在网格中的所有列上设置填充

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

问题描述

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

在此处输入图像描述

我的问题是关于填充。我想在列周围有一个padding:15px;. 目前，我为每一列提供class="top-pad-d". 但是当我看手机时遇到问题：

在此处输入图像描述

因此，为了使我的填充工作，我现在必须在媒体查询中进行填充，使用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>

标签： htmlcsstwitter-bootstrap

解决方案

我提出了一个完整的 css 解决方案：您将不必再更改 DOM。为了得到你想要的结果，我已经添加padding: 7.5px到每一列。现在在每列之间有一个距离7.5px + 7.5px = 15px。但是，外边缘仍然有一个填充7.5px。这就是为什么我7.5px在.row课堂上添加了一个填充。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>

希望这可以帮助！

推荐阅读