时间戳

首页 > 解决方案 > 在 Bootstrap 中设置位置而不影响响应能力

html - 在 Bootstrap 中设置位置而不影响响应能力

问题描述

我是网页设计的菜鸟。我刚刚开始尝试使用 Bootstrap。我想添加两个 这样的按钮，

但是，我在移动设备上得到了这个

使用此代码：

 <button style = "position:absolute; left:38%; top:50%; z-index=0" type="button" class="btn btn-primary btn-lg">Large button</button>
 <button style = "position:absolute; left:53%; top:50%; z-index:0" type="button" class="btn btn-primary btn-lg">Large button</button>

我知道我不应该添加位置属性，因为它们会使响应无效，但不使用它们会放置这样的按钮。

那么我该怎么做呢？如何在不影响响应的情况下指定位置？

谢谢你！

标签： htmlcssbootstrap-4

解决方案

感谢@zgood 的评论，我已经解决了这个问题：

 <div style="width:100vw; height: 100vh; display:flex; align-items: center; justify-content:center">
        <button style="margin:20px" type="button" class="btn btn-primary btn-lg">Large button</button>
        <button style="margin:20px" type="button" class="btn btn-primary btn-lg">Large button</button>
 </div>

推荐阅读