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

从div中删除gab，你需要添加p {margin：0}

请参阅此链接[demo] https://jsfiddle.net/k1jh1bu2/1/

Answer 2

差距是由margin-bottom标记上的p引起的。要从margin-bottom内的最后一个元素中删除col-md-4，请参阅以下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>

你也想要正确地确定最后一行...

如何消除列之间的差距？

2 个答案: