引导5和垂直定位
引导5和垂直定位
提问于 2021-07-12 11:47:37
我正在使用Bootstrap 5的柔性盒网格来设计一个响应性的移动第一角度web应用程序。
我希望我的应用程序的主屏幕有以下三个元素：
- 屏幕顶部的应用程序名称。
- 屏幕中央的一排按钮
- 屏幕底部的脚
将这些元素分别放置在屏幕的顶部、中部和底部的最佳响应方式是什么，同时保持它们以水平为中心。
目前我的代码如下所示：
<div class="container-fluid">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<h1>App name</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">First button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Second button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Third button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Fourth button</button>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-center">
<p>Footer</p>
</div>
</div>谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-12 12:01:43
与任何柔性盒靴带垂直对齐一样。例如，柔性箱容器中的自动边距.
<div class="container-fluid vh-100 d-flex flex-column">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<h1>App name</h1>
</div>
</div>
<div class="row my-auto">
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">First button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Second button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Third button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Fourth button</button>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-center">
<p>Footer</p>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68346859
复制相关文章
相似问题
腾讯云开发者
