时间戳

首页 > 解决方案 > 使拆分布局响应（Bootstrap4）

html - 使拆分布局响应（Bootstrap4）

问题描述

我目前正在开发一个使用 Bootstrap4 的 HTML 页面。我的想法是有一个分屏布局，右侧是徽标，左侧是注册表单。我还需要页面可以滚动，因为注册表单很长。到目前为止，找到一个页面滚动的教程一直是个问题。

但是，我已经让它像这样工作：

<div class="container-fluid h-100">
    <div class="row h-100">

        <!-- 1st half -->
        <div class="col-sm-6 col-2 h-100 py-2 d-flex align-items-center justify-content-center fixed-top" id="left">
            <h5 class="hidden-xs-down">
                <!--First half content here (fixed col)-->
                <p> I don't scroll </p>
            </h5>
        </div>

        <div class="col-sm-6 invisible col-2"><!--hidden spacer--></div>

        <!-- 2nd half -->
        <div class="col offset-2 offset-sm-6 py-2">
            <!--Second half content here (scrollable col)-->
                <p> I do scroll </p>
        </div>
    </div>
</div>

CSS 非常简单：

body, html {
    height: 100%;
}

此代码完美运行，但没有响应。我希望做到这一点，以便当窗口变小（或者如果用户在移动设备上）时，第一列在顶部，第二列在底部。

关于我如何做到这一点的任何想法？谢谢。

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

TBH 我不明白你为什么要使用它col-2，col也许offset-2我理解错了，但基于我在小提琴中看到的（我用你的标记创建）。对于您想要实现的目标，这根本不是必需的。相反，您应该使用col-12和适当的offset-sm. 在 BS3 中，它col-xs适用于移动设备，但情况发生了变化。

我以一种可以满足您的问题要求的方式调整了标记！从我的角度来看，所有影响网格布局的无用引导类都被删除了。position:fixed当大小达到移动断点时，必须添加一行 CSS 来重置，例如col-XX. 我着色<div>并添加了一些内容以更好地查看结果。

https://jsfiddle.net/vaefh780/4/

推荐阅读