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

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

Answer 2

你只需要在你的div中添加一个类，如

<%= link_to "Register to Unlock", new_subscription_path, class:"unlock", "data-reveal-id" => "firstModal" %>


<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal" data-reveal aria-labelledby="firstModalTitle" aria-hidden="true" role="dialog">
  <h2 id="firstModalTitle">This is a modal.</h2>
  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<div id="secondModal" class="reveal-modal" data-reveal aria-labelledby="secondModalTitle" aria-hidden="true" role="dialog">
  <h2 id="secondModalTitle">This is a second modal.</h2>
  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

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

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

当然你可以用自己的名字代替＆＃34; no-padding＆＃34;

Answer 3

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

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

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

3 个答案: