gpt4 book ai didi

html - Bootstrap 3 行中的中心控件集,具有适当的垂直对齐

转载 作者:行者123 更新时间:2023-11-28 07:09:21 24 4
gpt4 key购买 nike

我是网络开发新手,尤其是 CSS 和 Bootstrap。我正在努力将 5 个元素集中在 Bootstrap 行中。这是我所拥有的:

<div class="container-fluid">
<div class="row text-center" style="border:2px solid green">
<div style="display:inline-block;float:none;vertical-align:top;margin-top:8px">My Label</div>
<div class="col-xs-2 col-sm-2 col-md-1"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button1</button>
</div>
<div class="col-xs-3 col-sm-3 col-md-2"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button2</button>
</div>
</div>
</div>

在大多数情况下,它为我提供了我在 Firefox 和 Chrome 中想要的结果。控件之间的间距很小并且响应迅速——随着屏幕变小,空白区域缩小,而控件变大(以屏幕的百分比表示)。控件宽度通过 Bootstrap col-*-# 类进行控制。虽然,IE 似乎出于某种原因将按钮对齐在行的底部。我不确定为什么。

除了定义自定义 CSS 类而不是样式属性之外,这是实现我想要的结果的正确/最佳方法吗?或者,在 CSS 或 Bootstrap 中是否有更好的方法来做到这一点?必须使用 vertical-align 和 margin 来让标签对齐似乎很老套。此外,我开始使用表单元素和类。但是,这让事情变得更糟。使用表单元素有什么好处或不使用表单元素有什么坏处?

我阅读了许多类似的帖子。但他们似乎都有足够的不同之处,以至于解决方案似乎不适合我正在做的事情。我有一组控件,我希望它们作为一个单元居中。我不想简单地将它们对齐到 12 列的 Bootstrap 网格。

JSFiddle

最佳答案

您仍然可以在需要时使用自定义类:

.classname {
display: inline-block;
vertical-align: middle;
float: none;
}

关于html - Bootstrap 3 行中的中心控件集,具有适当的垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32753951/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com