bootstrap，只有4列-md-3的图像，如何删除img之间的间距

Question

我使用Bootstrap col-md-3全宽显示了4张图片，但是每张图片之间有一些空白。如何删除此空格？其中包括代码和屏幕截图。

​

<div class=".container-fluid">
  <div class="set4">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2>Past Events</h2>
        <div class="button1">
          <a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">ALL EVENTS</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">CORPORATE</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">WEDDING</a>
          <a
          class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">COMMUNITY</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">+</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-3">
    <div class="demo-content1">
      <img src="images/pastevent1.png">
    </div>
  </div>
  <div class="col-md-3">
    <img src="images/pastevent2.png">
    <div class="demo-content1"></div>
  </div>
  <div class="col-md-3">
    <img src="images/pastevent3.png">
    <div class="demo-content1"></div>
  </div>
  <div class="col-md-3">
    <img src="images/pastevent4.png">
    <div class="demo-content1"></div>
  </div>
</div>

​

​

​

Answer 1

padding:0应该可以做到这一点，但您可能需要使用!important来覆盖以前的格式：

.col-xs-3 {padding:0 !important;}

在您的例子中，您可以将它放在.col-md-3选择器上，如果您正在使用它的话。我不得不将其更改为.col-xs-3，以适应更窄的代码片段环境。

请记住，有多个地方的CSS是样式。例如，bootstrap是预先设置好的，你经常需要覆盖这个预先设置的样式。

一个很好的工具是开发工具(查看页面时按F12键)。了解如何动态检查/更改样式。这是生活的改变。

​

.col-xs-3 {padding:0 !important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class=".container-fluid">
  <div class="set4">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2>Past Events</h2>
        <div class="button1">
          <a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">ALL EVENTS</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">CORPORATE</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">WEDDING</a>
          <a
          class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">COMMUNITY</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">+</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-3">
    <div class="demo-content1">
      <img src="http://placekitten.com/400/400" class="img-responsive">
    </div>
  </div>
  <div class="col-xs-3">
    <img src="http://placekitten.com/400/400" class="img-responsive">
    <div class="demo-content1"></div>
  </div>
  <div class="col-xs-3">
    <img src="http://placekitten.com/400/400" class="img-responsive">
    <div class="demo-content1"></div>
  </div>
  <div class="col-xs-3">
    <img src="http://placekitten.com/400/400" class="img-responsive">
    <div class="demo-content1"></div>
  </div>
</div>

​