我正在尝试强制 <label/>
及其 <input/>
保持在同一条线上。
我正在使用表单控件类制作 <input/>
漂亮的。然而,当我这样做时,它真的想把自己放在一个单独的行上。我避免使用行和列,因为我希望标签紧挨着文本框,而不是根据屏幕大小来回移动。
<div>
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
我想要这个:
搜索 [______________________]
我明白了:
搜索
[______________________]
我如何强制他们保持在同一条线上?
最佳答案
您正在寻找的内容被 Bootstrap 称为内联表单或水平表单。
<form class="form-inline" role="form">
<div class="form-group">
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
</form>
确保您的表单上有 form-inline
类,实际上它们应该包装在 form-group
中。内联表单使所有内容都在一行中。
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Search</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</form>
当使用 form-horizontal
时,form-group
就像一行,因此您可以将内容移动到不同的行:) 这样,您需要使用网格属性,以便标签/输入正确对齐。
关于forms - 如何使用 Bootstrap 表单控制类强制输入与其标签保持在同一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25795527/