Question

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

但我只希望这种布局适用于宽度≥992px的设备。对于宽度为＆lt; 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

要记住关于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) ...尽管这会完全违反使用点引导;另一个框架可能更合适：）

希望这有帮助！

Answer 2

也许我不明白这个问题。为什么不使用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>

Bootstrap 4上的非12可分相等列

2 个答案: