Question

我有与Bootstrap一起使用的html代码：

<div class="text-center offset-top-20">
    <input id="update" class="btn btn-primary" type="submit" value="Update" /> &#160;
    <input id="cancel" class="btn btn-primary" type="submit" value="Cancel" />            
</div>

演示：https://jsfiddle.net/02jmwd85/1/

当我调整网页大小并减小宽度时，按钮将移动，第二个按钮将比第一个按钮低。有什么方法可以保持其位置并使它们保持水平？

Answer 1

Bootstrap的响应式设计功能使UI元素可以在狭窄的屏幕上自动堆叠为一个堆叠在一起。

在许多情况下，这是一个理想的功能。

可以通过在组件级别指定的自定义样式来覆盖此功能。

在当前情况下，可以将自定义样式应用于包含两个按钮的<div>-更新和取消以防止它们堆积。

这可以通过为封闭的div指定最小宽度来完成。

以下是示例：

<div class="text-center offset-top-20" style="min-width: 500px">
    <input id="update" class="btn btn-primary" type="submit" value="Update" /> &#160;
    <input id="cancel" class="btn btn-primary" type="submit" value="Cancel" />            
</div>

以上解决方案如何防止按钮堆叠？

自定义样式属性-style="min-width: 500px;"确保封闭的div不会变得小于500像素。

500像素的宽度将为两个按钮并排保留足够的空间。

这反过来将防止按钮堆叠。

设置按钮的固定位置

1 个答案: