Bootstrap 4上的非12可分相等列

Question

我有一个小的web应用程序，我想显示响应相等宽度的5列。

但我只希望这种布局适用于宽度≥992px的设备。对于<992px宽度的设备，我想在一个全宽行中显示5个HTML元素。

等宽列可以分成多行，但是有一个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>

然后，使用jQuery我可以选择.sep并在宽度<992px的情况下添加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），你应该使用偏移量。

例如，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的观点;另一个框架可能更合适:)

希望这可以帮助！