<分区>
<分区>
我目前正在开发一个使用 Bootstrap4 的 HTML 页面。我的想法是采用分屏布局，右侧是 Logo ，左侧是注册表单。我还需要页面可以滚动，因为注册表单在长边。到目前为止，找到页面滚动的教程一直是个问题。
但是，我已经让它像这样工作了:
<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%;
}
此代码完美运行，但没有响应。我希望做到这一点，以便当窗口变小时(或者如果用户在移动设备上)，第一列在顶部，第二列在底部。
关于如何实现此目标的任何想法？谢谢。
最佳答案
TBH 我不明白你为什么要使用那个 col-2 , col和 offset-2也许我理解错了，但基于我在 fiddle 中看到的内容(我用你的标记创建)。对于您想要实现的目标，这根本不是必需的。相反，你应该使用 col-12和适当的 offset-sm .在 BS3 中是 col-xs对于移动设备，但情况发生了变化。
我按照您的问题所要求的方式调整了标记!从我的 Angular 来看，所有影响网格布局的无用 Bootstrap 类都被删除了。需要添加一行 CSS 来重置 position:fixed当大小达到移动断点时，例如col-XX .我给 <div> 上色了并添加了一些内容以更好地查看结果。
关于html - 使拆分布局响应(Bootstrap4)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55309406/