时间戳

首页 > 解决方案 > Bootstrap 4列中断不均匀

bootstrap-4 - Bootstrap 4列中断不均匀

问题描述

感谢您花时间提供帮助。

我正在使用 Bootsrap 4。但是，网格系统与 Bootsrap 3 确实不同，我无法判断我的布局是否因为我的 html 代码中的错误而看起来很奇怪，或者，如果这是故意的，以及 Bootsrap 4 应该如何工作。你能看看我下面的html并确认吗？

我正在尝试用五个相等的列组成一行。这些列是响应式的，并且应该在小屏幕和超小屏幕上折叠：

HTML：

<div class="container">
  <div class="row test">

    <!-- col 1 -->
    <div class="col-lg col-md col-sm-12 col-xs-12">
      Stuff
    </div>

    <!-- col 2 -->
    <div class="col-lg col-md col-sm-12 col-xs-12">
      Stuff
    </div>

    <!-- col 3 -->
    <div class="col-lg col-md col-sm-12 col-xs-12">
      Stuff
    </div>

    <!-- col 4 -->
    <div class="col-lg col-md col-sm-12 col-xs-12">
      Stuff
    </div>

    <!-- col 5 -->
    <div class="col-lg col-md col-sm-12 col-xs-12">
      Stuff
    </div>

  </div><!-- end row -->
</div><!-- end container -->

当我添加内容时会出现问题......注意布局中断和列看起来都很奇怪。见例子，这里。

我究竟做错了什么？这是Bootsrap 4应该如何工作的吗？

理想情况下，列的塌陷是一样的，没有一列比其他列塌陷得更快，现在正在发生这种情况。

再说一次，我做错了什么？

谢谢，

标签： bootstrap-4

解决方案

您只需要使用col-smwhich 表示 small 和 up 的宽度相等。您的列的内容正在使行换行，因为内容对于列来说太宽（溢出）。用于flex-sm-nowrap防止列在 xs 断点之前换行。

https://codepen.io/anon/pen/Kxzrqd?editors=1100

<div class="container">
  <div class="row flex-sm-nowrap">

    <!-- col 1 -->
    <div class="col-sm">
      Stuff
    </div>

    <!-- col 2 -->
    <div class="col-sm">
      Stuff
    </div>

    <!-- col 3 -->
    <div class="col-sm">
      Stuff
    </div>

    <!-- col 4 -->
    <div class="col-sm">
      Stuff
    </div>

    <!-- col 5 -->
    <div class="col-sm">
      Stuff
    </div>

  </div><!-- end row -->
</div><!-- end container -->

您可能想col-md改用，因为内容不适合列内。

注意：-xs在 Bootstrap 4 中不再使用。

推荐阅读