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 以便有一个工作示例。

几个注意事项：

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

当然，确切的实现也取决于其他几件事，但这可能会使事情更清楚。