html - 如何在多个屏幕尺寸上水平对齐按钮

Question

我尝试在多个屏幕尺寸(台式机、笔记本电脑、Ipad、Iphone)上水平对齐三个按钮。我能够做到这一点的唯一方法是对不同的屏幕尺寸使用媒体查询。还有另一种方法可以水平对齐按钮吗？

这是我的代码

    <div class="row" id="plans-row">
        <div class="col-md-4 individual-plans" style="background-color: #FDFDFD;">

                    <button class="btn btn-success btn-default emphasis btn-lg signupBtn">Choose Plan</button>

            </div>
        </div>
        <div class="col-md-4 individual-plans" style="background-color: #FAFAFA;">
                        <button class="btn btn-success btn-default emphasis btn-lg signupBtn" onclick="parent.location='/login?redirect=plan&openPlan=1'">Choose Plan</button>
            </div>
        </div>
        <div class="col-md-4 individual-plans" style="background-color: #FDFDFD;">
            <div class="offWhiteArea plan rounded-top-right rounded-bottom-right adjustable-col">
                    <button class="btn btn-success btn-default emphasis btn-lg signupBtn" onclick="parent.location='/login?redirect=plan&openPlan=3'">Choose Plan</button>

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

Answer 1

如果您使用的是 Bootstrap 4，并且您将列定义为位于中间断点 ( .col-md-4 ) 处的 12 列的行的三分之一，则列将在 sizes 处全宽(堆叠)中等以下。如果您希望它们始终并排放置，请从小断点 (.col-4) 开始。你也有一些杂散关闭</div>您的代码示例中的标记也会导致问题。

(如果使用 Bootstrap 3，同样的问题，但是您需要使用 .col-xs-4 从最小的断点开始)

Bootstrap 4“所有断点”的文档:

https://v4-alpha.getbootstrap.com/layout/grid/#all-breakpoints

<div class="row" id="plans-row">
    <div class="col-4 individual-plans" style="background-color: #FDFDFD;">
         <button class="btn btn-success btn-default emphasis btn-lg signupBtn">Choose Plan</button>
    </div>
    <div class="col-4 individual-plans" style="background-color: #FAFAFA;">
         <button class="btn btn-success btn-default emphasis btn-lg signupBtn" onclick="parent.location='/login?redirect=plan&openPlan=1'">Choose Plan</button>
    </div>
    <div class="col-4 individual-plans" style="background-color: #FDFDFD;">
        <div class="offWhiteArea plan rounded-top-right rounded-bottom-right adjustable-col">
                <button class="btn btn-success btn-default emphasis btn-lg signupBtn" onclick="parent.location='/login?redirect=plan&openPlan=3'">Choose Plan</button>
        </div>
    </div>
</div>

或者，您可以使用 flex box，但将其与已在整个站点中使用的网格系统相结合可能会产生不良的副作用。如果您按照另一个答案中提到的那样将其添加到您的行类中，那么您就是在对加载该 CSS 的所有行执行此操作。走 flexbox 路线是一个好主意和改进，但如果你走那条路线，我会为该用途创建一个扩展类或完全独立的容器。