Question

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

右侧的列包含图像，并且应在屏幕尺寸低于中等时消失。在中等大小及以上的屏幕上，它应该需要7个网格列。左侧的列应采用屏幕尺寸低于中等的网格的所有12列，并采用其他尺寸的5列。

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

（请忽略使用＆＃34; className＆＃34;而不是＆＃34; class，＆＃34;这是一个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

据我了解，你正在努力实现这样的目标：

＆＃13;

<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>

＆＃13;

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

几点说明：

Bootstrap显示实用程序类正在从断点开始运行。例如，.d-md-block也会在 md ， lg 和 xl 大小中产生影响。所以没有必要写全部。
我通过添加.jumbotron类来移除.display-6和.m-0的下边距，以便更好地垂直对齐。
.h-100类被移除，因为.align-items-stretch正在拉伸框以占用可用的垂直空间。

当然，确切的实施也取决于其他一些事情，但这可能会使事情变得更清楚。

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

1 个答案: