css - 如何消除列之间的差距？

Question

我在 BootStrap 上有这个简单的结构。

<div class="container">
  <div class="row">
     <div class="col-md-4 blue-section" ><p>Some content</p></div>
     <div class="col-md-4 red-section"><p>Some content</p></div>
     <div class="col-md-4 green-section"><p>Some Content</p></div>
  </div>
</div>

CSS 自定义文件是:

.container{ width:100%;}
.row{ background-color:#000;}

.blue-section{background-color:blue;}
.red-section{background-color:red;}
.green-section{background-color:green;}

当我调整页面大小时，各列相互堆叠，它们之间有一个间隙，最后一个间隙的高度与之前的间隙相同。我怎样才能消除这些差距？是在 .row 上还是在 .col-*-* 上？谢谢

Answer 1

间隙是由 p 标签上的 margin-bottom 引起的。从 col-md-4 中的最后一个元素中删除 margin-bottom 请参阅以下 CSS 中的最后一行(我添加了额外的段落以仅演示最后一个元素是目标):

.container{ width:100%;}
.row{ background-color:#000;}

.blue-section{background-color:blue;}
.red-section{background-color:red;}
.green-section{background-color:green;}

.col-md-4 > *:last-child {
  margin-bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-4 blue-section">
      <p>Some content</p>
      <p>Some content</p>
      <p>Some content</p>
    </div>
    <div class="col-md-4 red-section">
      <p>Some content</p>
    </div>
    <div class="col-md-4 green-section">
      <p>Some Content</p>
    </div>
  </div>
</div>

你也想正确地确定最后一行的范围......