Question

在下面的代码中我有3个col-md-4，我想减少大约25px之间的空间。我已经尝试减少它们之间的边距，同时分别增加第一列和最后一列的左侧和右侧的填充。这种方法的问题在于，当操纵窗口大小时，由于填充增加，它会使图像列偏移。

HTML：

<div class="cards">
  <div class="container">
    <h2>
      Our Expertise.
    </h2>
  </div>
  <div class="row">
    <div class="col-md-4">
     <!-- <img> -->
     <!-- <img> -->
     <!-- <img> -->
    </div>
    <div class="col-md-4">
     <!-- <img> -->
     <!-- <img> -->
     <!-- <img> -->
    </div>
    <div class="col-md-4">
     <!-- <img> -->
     <!-- <img> -->
     <!-- <img> -->
     <!-- <img> -->
    </div>
  </div>
</div>

CSS：

 html, body {
 margin: 0;
 padding: 0;
 font-family: 'Libre Baskerville', sans-serif;
 }

  .first    {
     padding-left: 200px !important;
  }

  .last {
    padding-right: 200px !important;
  }

  .container {
    max-width: 980px;
    margin: 0 auto;
  }

  .header   {
    padding-top: 20px;
  }

  .header h1    {
    font-size: 20px;
  }

  .nav li   {
    margin: 0px;
    border: 0px;
  }
  .nav li a {
    color: #333;
  }

  .jumbotron {
     background-color: transparent;
     padding-top: 100px;
     padding-bottom: 100px;

  }
  .jumbotron h2     {
     font-size: 50px;
  }
  .jumbotron h2 span    {
     color: #ffc200;
  }

  .banner {
     background-color: #333;
     height: 140px;
     color: white;
     text-align: center;
     padding-top: 30px;
  }

  .cards {
     background-color: #FFC200;
     text-align: center;
  }

  .cards img {
     margin-bottom: 25px;
     padding: auto;
  }

  .cards h2 {
     margin-top: 20px;
     margin-bottom: 80px; 
  }

  @media (max-width: 992px) {
     .col-md-4 {
     margin: 0 auto 0;
     text-align: center;
     width: 100%;
  }

  .cards img {
    width: 60%;
   } 
  }

@media (max-width: 500px) {
  .header h1 {
    text-align: center;
}

  .nav li {
    text-align: center;
    width: 100%;
}

  .cards img {
    width: 100%;
   }
 }

假设列中有图像，但因为我没有10个重复点，所以不会让我发布它们。

Answer 1

只需更改默认列填充。您需要将列之间的总空间保持为偶数，因此24将是好的，您只需将默认列填充从15px更改为12px并覆盖行上的负边距：

.row {
  margin-left: -12px!important;
  margin-right: -12px!important;
}

div[class*='col-'] {
  padding-left: 12px;
  padding-right: 12px;
}

.inner {
  border:1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cards">
  <div class="container">
    <h2>
      Our Expertise.
    </h2>
  </div>
  <div class="row">
    <div class="col-md-4">
     <div class="inner">Column 1</div>
    </div>
    <div class="col-md-4">
     <div class="inner">Column 2</div>
    </div>
    <div class="col-md-4">
     <div class="inner">Column 3</div>
    </div>
  </div>
</div>

删除3个HTML列之间的空间

1 个答案: