Question

Bootstrap有很多examples for types of forms。我有兴趣使用看似这样的“水平形式”

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

使用Web检查器工具栏概述某些元素后，这就是它的样子：

Picture 2.png http://img594.imageshack.us/img594/4681/picture2yn.png

我在弹出模式中工作，空间已经有点紧张了。我尝试将bootstrap的网格系统的.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>

如何用CSS缩小Bootstrap水平表单标签？

2 个答案: