从较小的屏幕观看时如何使按钮集中？

Question

我在同一行有两个按钮但是当在较小的屏幕上查看网站并且按钮被强制分为两行时，第二个按钮不是集中的。

从笔记本电脑看

从手机查看

<span class="inline" style="">
    <a href="/mgconsole" class="btn btn-theme"><strong>Login to ASDADSADASDAS</strong></a>
    <a href="/idx/verify" class="btn btn-outline" style="margin: 15px;"><strong>I Want to SDSDASDDSADASDASDASDASD</strong></a>
 </span>

如何集中第二个按钮？

Answer 1

您必须在按钮上添加属性text-align: center;。

Answer 2

告诉我这个不甜，

<div class="row">

    <div class="col-xs-2"></div>

    <div class="col-xs-8">

        <div class="row">
             <div class="col-sm-6" style="margin-bottom:10px;">
                 <button type="button" class="btn btn-success btn-block">Enter</button>
             </div>

             <div class="col-sm-6">
                 <button type="button" class="btn btn-danger btn-block">Exit</button>
             </div>
        </div>

    </div>

    <div class="col-xs-2"></div>

</div>

Answer 3

您可以使用网格功能，例如：

如果您希望小型设备上的2行按钮和其他行上的按钮，则可以使用不同的网格宽度（对于其他网格宽度为12而小6）

  <div class="row">
    <div class="col-xs-12  col-sm-6  col-md-6 col-lg-6">
        <button type="button" class="btn btn-success btn-block">Enter</button>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <button type="button" class="btn btn-danger btn-block">Exit</button>
    </div>
</div>