在移动设备上居中 Bootstrap5 按钮答案

【问题标题】：Centering Bootstrap5 buttons on mobile在移动设备上居中 Bootstrap5 按钮
【发布时间】：2022-08-17 01:13:41
【问题描述】：

我目前正在开发一个 Web 应用程序，并且正在尝试弄清楚如何将两个引导按钮并排居中。它适用于移动设备，但是当我尝试检查页面并在移动设备上查看它时，它们会出现在不同的行和中心（一个在另一个之上）。我该如何解决这个问题，以便在移动设备上，它们像在计算机上一样并排显示？这是代码：

<div class=\"container\">
        <div class=\"row justify-content-center\">
            <div class=\"col-md-4 col-lg-3 text-center\">
                <a href=\"#\" style=\"font-size: 18px;\" class=\"btn btn-primary btn-lg mb-3\" role=\"button\">Button 1</a>
            </div>  
            <div class=\"col-md-4 col-lg-3 text-center\">
                <a href=\"#\" style=\"font-size: 18px;\" class=\"btn btn-primary btn-lg mb-3\" role=\"button\">Button 2</a>
            </div>
        </div> 
</div>

标签： html css bootstrap-5

【解决方案1】：

这个怎么样。无论您使用什么屏幕尺寸，从列中删除断点并保留一半的空间：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center">
    <div class="col-6 text-center">
      <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 1</a>
    </div>
    <div class="col-6 text-center">
      <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 2</a>

    </div>
  </div>
</div>

【讨论】：