调整浏览器大小时显示行时出错

Question

我正在使用Bootstrap，我在显示一些按钮时遇到以下错误：

HTML代码如下：

<div class="row" style="margin-top: 20px">
    <div class="col-lg-6 text-left">
        <button class="btn btn-primary profile-button">Save</button>
    </div>
    <div class="col-lg-6 text-right">
        <button class="btn btn-primary profile-button">Reset</button>
    </div>
</div>

自定义类的CSS是：

.profile-button {
    min-width: 125px;
}

只有在调整浏览器宽度时才会出现错误。附带的截图是当浏览器的宽度为显示器的一半时（因此我的分辨率为540px）。我相信显示错误从768px宽度值开始。我目前使用的分辨率是1920x1080。

我已经尝试将行包装在容器div中，也在div内部包含容器和容器流体类。

Answer 1

只需将col-xs-6类添加到div

即可

<div class="row" style="margin-top: 20px">
    <div class="col-lg-6 col-xs-6 text-left">
        <button class="btn btn-primary profile-button">Save</button>
    </div>
    <div class="col-lg-6 col-xs-6 text-right">
        <button class="btn btn-primary profile-button">Reset</button>
    </div>
</div>

DEMO

Bootstrap Grid

---

Answer 2

Bootstrap将列一个放在另一个下面的较小设备上......很可能你的列变成了全宽和堆叠，而不是保持一半的大小。这是标准行为。

如果按钮必须并排放置，我建议您使用自己的类并浮动它们，确保最大宽度为50％