css - 当我使用少于 12 列时，如何避免将 Bootstrap 列分解为行？

Question

我正在尝试将站点名称 + 2 个图像对齐为我的站点标题。使用 Bootstrap 网格布局，我可以轻松地实现这一点，并在中型/大型设备中获得漂亮的外观。

| site-name                                                        | | image1 | | image2 |

但是，对于小尺寸设备，我的 3 列分成 3 行，并且布局不是我想要的:

| site-name                                                        |
| image1    |
| image2    |

由于我只使用了 3 个小列，因此我想将它们放在同一行中，因为它们只使用了几个像素。小屏幕的结果将类似于:

| site-name | | image1 | | image2 |

我创建了一个Bootply demo 。下面的代码是迄今为止我能做的最好的代码。我已经尝试过使用 .pull-right 之类的东西来避免添加空的 8 列，但结果是相同的。

当前代码:

<div class="row">
  <div class="col-sm-2">
    <h2>text1</h2>
  </div>

  <div class="col-sm-8">
    <!-- empty -->
  </div>

  <div class="col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

Answer 1

听起来您认为的“小型”设备正是 Bootstrap 认为的“超小”设备。

这应该会给你想要的效果:

<div class="row">
  <div class="col-xs-4 col-sm-2">
    <h2>text1</h2>
  </div>

  <div class="hidden-xs col-sm-8">
    <!-- empty -->
  </div>

  <div class="col-xs-4 col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-4 col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

您可能需要将所有类提高到下一个大小才能获得您想要的内容(例如“col-sm-4 col-md-1”)