Question

我似乎无法理解这种行为：

<div class="container-fluid buy-now">
            <div class="row">
                <div class="col-sm-offset-3 col-sm-6 text-center">
                    <button type="button" class="btn btn-primary btn-lg" id="buy-now-button" >BUY NOW FOR $400</button>

                     <button id="make-an-offer-button" type="button" class="btn btn-lg btn-info">MAKE AN OFFER</button>
                </div>
            </div>
</div>

基本上，按钮彼此相邻，直到我们在彼此堆叠时达到大约1244px的宽度。然后，他们以约768px的速度回到水平位置。但是，在宽度约为620px时，它们会再次堆叠。

为什么在看似随机的屏幕分辨率下出现这种“跳跃”行为？根据我设置的定义，当这些按钮返回到堆叠模式时，这些按钮应保持彼此相邻，直到768px（及以下）。

Answer 1

您可以使用sm替换第三行中的xs类，以便它适用于所有尺寸：

<div class="col-xs-offset-3 col-xs-6 text-center">

这将导致只有一个水平/垂直中断。

这是：https://codepen.io/anon/pen/QaMxPY

-

第二个解决方案：

从该标记中删除col-xs-offset-3 col-xs-6，结果为

<div class="text-center">

这将使按钮居中，仅在屏幕变得太窄而无法并排放置时将它们叠加。

https://codepen.io/anon/pen/QaMxPY

-

或者使用较小的偏移量和更宽的容器类：

<div class="col-xs-offset-1 col-xs-10 text-center">

https://codepen.io/anon/pen/RxZBbx

-

您可以通过对其应用不同的类（btn-sm而不是btn-lg）并更改其字体大小来缩小按钮：

https://codepen.io/anon/pen/mpMjyx

水平自举按钮堆叠两次

1 个答案: