css - 如何用 CSS 让 Bootstrap 的水平表单标签更小？

Question

Bootstrap 有很多关于表单类型的示例。我有兴趣使用看起来像这样的“水平形式”

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

我在弹出模式中工作，空间已经有点紧张了。我尝试将引导程序的网格系统.span1和.span2标签作为一个类添加，但它没有提供所需的行为。

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

Answer 1

我不知道引导程序是否为它定义了一些东西..下面是一种解决方法..

<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>