如何使用 col-sm 内联？

Question

我有两个块使用 Bootstrap 3：

<div class="row">
      <div class="col-md-4 col-sm-4">A</div>
      <div class="col-md-4 col-sm-4">B</div>
</div>

当我处于移动模式时，方块被放置在彼此之下。

如何将它们内联放置直到有空闲 space？

Answer 1

仅供参考 bootstrap 3 我们得到如下四个主要断点：

lg: 大型设备桌面 (≥1200px)

md: 中型设备桌面 (≥992px)

sm: 小型设备平板电脑 (≥768px)

xs: 超小型设备手机 (<768px)

他们每个人都有 12 列，大小均匀，左右 15px 间距。

有关详细信息，您可以查看 bootstrap 网格系统文档 here。

要在所有主要断点处创建响应式 2 列行，因为 col-xs-* 使用 max-width 媒体查询而所有其他使用 min-width，您所要做的就是创建两个包含 col-xs-6 和 col-sm-6 的列并将它们包装到 row 中，如下所示：

div.row>div {
  padding: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-xs-6 bg-info">A</div>
    <div class="col-sm-6 col-xs-6 bg-success">B</div>
  </div>
</div>

注意： 我只是添加了 container-fluid、padding: 20px; 和背景颜色以更好地说明。

如何使用 col-sm 内联？

How to use col-sm inline?

html

css

twitter-bootstrap

twitter-bootstrap-3