Question

我目前正在使用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%;
}

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

关于如何实现此目标的任何想法？谢谢。

Answer 1

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

我修改了标记，使其符合您的问题要求！从我的角度来看，所有无用的引导类都被删除了，这会影响网格布局。当大小达到移动断点时，例如，需要添加一行CSS来重置position:fixed。 col-XX。我为<div>上色并添加了一些内容，以便更好地查看结果。

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

使拆分布局响应式（Bootstrap4）

1 个答案: