Bootstrap 4 上的非 12 整除相等列

Question

我有一个小网络应用程序，我想显示 5 列响应式等宽。

但我只希望这种布局用于宽度≥992px 的设备。 对于宽度

等宽的列可以分成多行，但是有一个 Safari flexbox bug 阻止了它在没有 显式flex-basis 或border。

reduced test case outside Bootstrap 中记录了两种解决方法，但如果浏览器是最新的，则不应该这样做 必要的。

来源：https://getbootstrap.com/docs/4.0/layout/grid/

所以，我有点困惑如何使用 Bootstrap 4 实现我想要的这种响应行为。

我有这个“想法”，但我觉得会很丑，你怎么看？

让我们考虑一下这个标记

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
    <div class="sep"></div>
    <div class="col">Column</div>
  </div>
</div>

然后，在宽度 .sep 并添加 bootstrap4 类 w-100。

感谢阅读，请原谅我的英语不好。

Answer 1

也许我不明白这个问题。为什么不直接使用 lg 自动布局列 (col-lg)？

https://www.codeply.com/go/OohsSfM7Zu

<div class="row">
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
</div>

Answer 2

关于 Bootstrap，首先要记住的是行必须包含 12 列。如果你有一行没有进入12（例如5），你应该使用offsets。

例如，12 / 5 是 2，剩下的是 2。所以你想使用宽度为2 的列，总共有10 列。从这里开始，您将在左侧偏移 1。考虑到您现在总共有11，您也自动抵消了右侧的1。

这可以通过以下方式证明：

.row {
  margin: 0 !important; /* Prevent scrollbars in the fiddle */
  text-align: center; /* Helps illustrate the centralisation */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="row">
  <div class="col-sm-2 offset-sm-1">One</div>
  <div class="col-sm-2">Two</div>
  <div class="col-sm-2">Three</div>
  <div class="col-sm-2">Four</div>
  <div class="col-sm-2">Five</div>
</div>

如果您对这个偏移量不满意，那么您可以简单地使用自定义媒体查询，例如 width: calc(100% / 5) ...尽管这完全违反了使用 Bootstrap 的要点；另一个框架可能更合适:)

希望这会有所帮助！