如何使用CSS使Bootstrap的水平表单标签更小？

Question

Bootstrap有很多表单类型的例子.我有兴趣使用看起来像这样的"水平形式"

Picture.png http://img35.imageshack.us/img35/244/picturebm.png

在使用Web检查器工具栏概述某些元素后,它就是这样的:

图片2.png http://img594.imageshack.us/img594/4681/picture2yn.png

我在弹出模式中工作,空间已经有点紧张了.我尝试添加自举的网格系统.span1,并.span2以标签为一类,但它没有得到所需要的行为.

有没有办法使用引导程序的其他方面来获得所需的行为(即收紧水平表格上的标签占用的空间量)？这样做的正确方法是什么？我正在使用bootstrap版本2.1

Answer 1

我不知道bootstrap是否有为它定义的东西..下面是一个解决方法..

<div class="control-group">
<label class="control-label" style="width:auto" for="inputEmail">Email</label>
<div class="controls" style="margin-left:auto">
<input type="text" class="input-small" id="inputEmail" placeholder="Email">
</div>
</div>

我添加了style="width:auto"哪个是默认值140px,style="margin-left:auto"哪个是默认值160px.还要class="input-small"减少输入字段宽度以挤出更多空间,使其适合模态.

现在你进一步调整以适应它的需要..

Answer 2

要减少垂直间距，form-control-sm请缩小字体大小（使用 Bootstrap 4）：

<form>
  <div class="form-group form-row">
    <label class="col-sm-2 col-form-label form-control-sm">Label</label>
    <div class="col-sm-3">
      <input class="form-control form-control-sm">
    </div>
  </div>
</form>