我正在尝试将复选框与文本输入对齐。我希望文本框成为一个表单控件,以便它与页面上的其他输入对齐。但是,如果我这样做,它就会变成一个 block 元素,并且在复选框之后有一个换行符。如果我不使用表单控件类,输入框就不够宽,而且与表单的其余部分相比看起来也不正确。如果我使用网格布局,复选框和文本框之间的空间太大。
下图代表以下代码:
<div>
<input type="checkbox" />
<input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>
最佳答案
像 form-inline
和 form-group
这样的简单类可以帮助你解决这个问题。
<div class="form-inline">
<div class="form-group">
<input type="checkbox"/>
<input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>
</div>
fiddle :http://jsfiddle.net/2yao3x5r/
但是,从 Bootstrap 文档
This only applies to forms within viewports that are at least 768px wide
此外,如果您的复选框属于您的输入,我有一个建议使用 input-group
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
如果您的视口(viewport)小于 768px,我建议使用 .row
和 .col
修饰符。例如
<div class="row">
<div class="col-xs-2 col-sm-2">
<input type="checkbox"/>
</div>
<div class="col-xs-10 col-sm-10">
<input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>
</div>
关于html - 如何使用 Bootstrap 将复选框与文本输入表单控件紧密对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33907452/