html - 如何使用 col-sm 内联？

Question

我有两个 block 使用 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>

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

如何将它们内联放置直到有可用空间？

Answer 1

仅供引用，在 bootstrap 3 中，我们有四个主要断点，如下所示:

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

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

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

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

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

有关更多信息，您可以查看 Bootstrap 网格系统文档 here .

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

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; 和背景颜色，以便更好地说明。