Html 在引导程序中转到较小的屏幕时，如何将一行拆分为几行？

我有以下代码：

   <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>

当我们有一个大屏幕时，所有图像在同一行上并排显示，当我转到一个小屏幕时，它们一个叠在另一个上。 如何在每个图像之间进行中断？我需要它有一个空白，就像每个图像在不同的行上一样。

---

我尝试添加仅在xs或sm中可见的

，但没有效果。这是用简单的方法实现的，还是应该在媒体查询中添加填充？

试试这个，看看是否有效

<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>

试试这个，看看是否有效

<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>

为什么这样做会有问题？跟你自己建议的差不多。这是一个简单的方法

---

为什么这样做会有问题？跟你自己建议的差不多。这是一个简单的方法

我只是想知道是否有一种引导的方式，知道它原来是一行，但现在是几行，所以它需要休息。非常感谢你！不，引导不会自动完成。也许您甚至不应该将.row类视为一行，因为.row类所做的只是在左侧和右侧添加一些边距。我只是想知道是否有一种引导方法可以知道它最初是一行，但现在是几行，因此需要中断。非常感谢你！不，引导不会自动完成。也许您甚至不应该将.row类看作一行，因为.row类所做的只是在左侧和右侧添加一些边距。这太棒了！非常感谢。这太棒了！非常感谢你。