当我使用少于 12 个列时，如何避免将 Bootstrap 列分成行？

Posted 2023-03-06

【中文标题】当我使用少于 12 个列时，如何避免将 Bootstrap 列分成行？

【英文标题】：How can I avoid breaking Bootstrap columns into rows when I use less than 12 cols?

【发布时间】：2015-09-30 20:32:05

【问题描述】：

我正在尝试将站点名称 + 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>

【参考方案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”）

【讨论】：

泰！看来.hidden-xs 类是解决问题的诀窍。

【参考方案2】：

这是因为您使用的是 col-sm，而不是 col-xs（更适用于移动设备等小屏幕）。

试试这个：

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

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

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

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

或者这个：

<div class="row">
  <div class="col-xs-10">
    <h2>text1</h2>
  </div>

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

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

你可以在这里阅读一个很好的解释：

Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap

【讨论】：

Ty，它的工作原理，但布赖恩的答案有更好的布局看（你的建议得到合并图像）。