html - 在 Bootstrap 中转到较小的屏幕时如何将一行分成几行？

Question

我有以下代码:

   <div class="row second-row">
      <div class="col-md-3 col-sm-12 col-xs-12">
        <img class="img-responsive" src="http://placehold.it/200x150">
      </div>
      <div class="col-md-3 col-sm-12 col-xs-12">
        <img class="img-responsive" src="http://placehold.it/200x150">
      </div>
      <div class="col-md-3 col-sm-12 col-xs-12">
        <img class="img-responsive" src="http://placehold.it/200x150">
      </div>
      <div class="col-md-3 col-sm-12 col-xs-12">
        <img class="img-responsive" src="http://placehold.it/200x150">
      </div>
    </div>

当我们使用大屏幕时，所有图像并排显示在同一行中，而当我使用较小的屏幕时，它们会一个叠一个地显示。我怎样才能在每张图片之间休息一下？我需要它有一个空白，就像每个图像都在不同的行上一样。
我尝试添加 <br>只有 xs 或 sm 才可见，但它不起作用。这是否可以通过简单的方式实现，或者我应该在媒体查询中添加填充？

Answer 1

试试这个，看看它是否有效。

<div class="row second-row">
  <div class="col-md-3 col-sm-12 col-xs-12">
    <img class="img-responsive" src="http://placehold.it/200x150">
  </div>
  <div class="col-xs-1 visible-xs">
    <br/>
  </div>
  <div class="col-md-3 col-sm-12 col-xs-12">
    <img class="img-responsive" src="http://placehold.it/200x150">
  </div>
  <div class="col-xs-1 visible-xs">
    <br/>
  </div>
  <div class="col-md-3 col-sm-12 col-xs-12">
    <img class="img-responsive" src="http://placehold.it/200x150">
  </div>
  <div class="col-xs-1 visible-xs">
    <br/>
  </div>
  <div class="col-md-3 col-sm-12 col-xs-12">
    <img class="img-responsive" src="http://placehold.it/200x150">
  </div>
</div>