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列行中的第三列，则列将满宽度（堆叠），尺寸低于中等。如果您希望它们始终并排，请从小断点（.col-4）开始。您的代码示例中也有一些错误的关闭</div>标记，这也会导致问题。

（如果使用Bootstrap 3，同样的问题，但是你想要使用.col-xs-4从最小的断点开始）

Bootstrap 4＆＃34的文档;所有断点＆＃34;：

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>

或者，您可以使用弹性框，但将其与已在整个网站中使用的网格系统相结合可能会产生不良副作用。如果您将其添加到您的行类中，如另一个答案所述，您可以对加载该CSS的所有行执行此操作。走向flexbox路线是一个好主意和一个改进，但如果你采取这种方式，我会创建一个扩展类或完全独立的容器供该用途。

Answer 2

如果您在display:flex;上设置.row，您将获得水平按钮。通过添加justify-content: space-between;，您可以均匀地间隔它们。在这种情况下，您不需要bootstrap的col-md-4课程。

Answer 3

你必须有很多关闭div标签。删除第二个和第四个，我认为它应该做的伎俩（如果我理解你的问题）。

如何在多种屏幕尺寸上水平对齐按钮

3 个答案: