如何清除 bootstrap 中响应式 div 之间的边距

Question

我在 bootstrap 项目中有此代码，但我无法将响应式 div 并排放置且它们之间没有边距。谁能帮帮我？

这是我的代码：

.container-vip {
  width: 100%;
  height: 300px;
  background: #09C;
  border: 1px solid #fff;
  padding: 0;
  margin: 0;
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="container-vip">
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="container-vip">
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="container-vip">
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="container-vip">
    </div>
  </div>

</div>

Answer 1

它们不是边距，而是填充，您可以在 col-* div 上使用 padding: 0px 将其删除。

Answer 2

将此规则添加到自定义 css 文件的底部

.col-xs-6, .col-sm-6, .col-md-3, .col-lg-3{
background:red;
padding:0px;
}

Answer 3

您只需要在您的 div 中添加一个 class 即可

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 no-padding">
    <div class="container-vip">
    </div>
  </div>

并在您自己的 .css 文件中添加 css

.no-padding{padding: 0 !important;}

当然你可以用自己的名字代替 "no-padding"

如何清除 bootstrap 中响应式 div 之间的边距

How to clear margins between responsive divs in bootstrap

html

twitter-bootstrap

css

margins