Question

感谢您抽出宝贵时间来提供帮助。

我使用的是Bootsrap4。但是，网格系统与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 -->

当我添加内容时发生问题...观看布局中断，各列看起来都很奇怪。参见示例here。

我在做什么错？ Bootsrap 4应该是这样工作的吗？

理想情况下，这些列会平均折叠，现在没有一个列比其他列的折叠速度更快。

再次，我在做什么错了？

谢谢

马蒂

Answer 1

您只需要使用col-sm，这意味着小号和小号的宽度相等。列的内容使行换行，因为内容对于列而言太宽（溢出）。使用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中不再使用。

Bootstrap 4列断裂不均匀

1 个答案: