本文介绍了使用Flex CSS和Bootstrap实现响应式布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
进入
我在这里使用过小断点
整个引导v5.1.3 css文件中只有
问题描述
我已经在台式机、平板电脑和手机大小之间试验了一段时间，但在下面的布局中遇到了问题。
我使用的是Bootstrap中的网格布局，但由于它是两列，随着宽度缩小，第二列位于左侧的Main Content部分下方。我想将其拆分为状态下方的屏幕大小。
这是起始视图：
这是我希望发生的事情：
这将是手机视图：
因此，宽视图在测试期间会缩小，我希望它跳转到移动视图，在该视图中，顶部侧栏位于主要内容上方并与主要内容的宽度匹配，而底部侧栏对底部执行相同的操作。
将两个侧边栏都放在底部很容易，但我想尝试一下将其分开的可能性。
为了测试，我使用的是Flexbox、CSS3和bootstrap5+，没有插件或Java脚本。
css
解决方案1：您可以将cssfloat功能与float-end和float-start引导类ref：
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid vh-100 vw-100 py-2 bg-light clearfix">
<div class="float-sm-end col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="float-sm-start col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="float-sm-end col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>Full page视图并将浏览器宽度减小到576px以下以查看响应更改。
我在这里使用过小断点
col-sm-*，使用不同的breakpoints来处理different devices。整个引导v5.1.3 css文件中只有
d-*-grid规则。其余内容为experimental。
解决方案2：使用Flexbox，处理顺序和包装。@Rana答案的改进版本：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light">
<div class="order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="order-sm-2 order-1 col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="order-sm-3 order-3 col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>这篇关于使用Flex CSS和Bootstrap实现响应式布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！