Bootstrap 4 列垂直堆叠而不是水平堆叠

Question

我有一个 Bootstrap 容器，其中一行由两列组成。

右侧的列包含一张图片，在屏幕尺寸低于中等尺寸时应该会消失。在中等尺寸及以上的屏幕尺寸下，它应该有 7 个网格列。左侧的列应在屏幕尺寸低于中等尺寸时占据网格的所有 12 列，在其他尺寸下占据 5 列。

不幸的是，我看到了一些不同的东西 - 两列垂直堆叠，并且右边的列在较小的屏幕尺寸下不会消失。我做错了什么？

（请忽略使用 "className" 而不是 "class," 这是一个 React 项目，这是 React 约定。）

<div className="container-fluid h-100 w-100">
    <div className="row d-flex flex-row justify-content-around align-items-center h-100">
        <div className="col-xs-12 col-md-5 d-flex align-items-center justify-content-around h-100 float-right">
            <div className="jumbotron">
                <h6 className="display-6">Sorry to see you go!</h6>
            </div>
        </div>
        <div className="backdrop col-md-7 d-none d-md-inline d-lg-inline d-xl-inline d-flex justify-content-around align-items-center h-100" />
    </div>
</div>

Answer 1

据我了解，您正试图实现这样的目标：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
        <div class="d-flex flex-row align-items-stretch">
            <div class="col-md-5">
                <div class="jumbotron m-0">
                    <h6 class="display-6 m-0">Sorry to see you go!</h6>
                </div>
            </div>

            <div class="backdrop d-none d-md-flex col-md-7 align-items-center" style="background-color: rgba(255,0,0,.1);">
                [.backdrop]
            </div>
        </div>
    </div>

请注意，我已将 className 属性重命名为标准 class 以便有一个工作示例。

几个注意事项：

Bootstrap 显示实用程序 classes 正在从断点开始工作。例如 .d-md-block 也会对 md、lg 和 xl 尺寸产生影响。所以没必要写全部。
我通过添加 .m-0 class 删除了 .jumbotron 和 .display-6 的底部边距，以便更好地垂直对齐。
.h-100 classes 已被删除，因为 .align-items-stretch 正在拉伸框以占据可用的垂直方向 space。

当然，具体的实施还取决于其他一些因素，但这可能会让事情变得更清楚。

Bootstrap 4 列垂直堆叠而不是水平堆叠

Bootstrap 4 columns are stacking vertically instead of horizontally

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4