引导程序，只有 4 列 md-3 的图像，如何删除图像之间的间距

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 选择器上，如果你正在使用它的话。为了更窄的 SO 代码 sn-p 环境，我不得不将其更改为 .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>