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

Question

Bootstrap有很多表单类型的示例，我想使用“水平表单（Horizontal form）”，它看起来像这样:

这是在使用 Web Inspector 工具栏对某些元素进行轮廓说明后的效果:

我正在弹出式模态框内工作，空间已经有点紧。我尝试将 Bootstrap 网格系统的 .span1 和 .span2 添加到标签作为类，但它没有提供所需的行为。

是否有一种方式可以使用 Bootstrap 的其他方面来获得所需的行为（即缩小水平表单标签所占用的空间）？正确的方法是什么？我正在使用 Bootstrap 版本 2.1

- cwd

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"以缩小输入字段的宽度，以腾出更多空间，使其适合模态框。现在您可以进一步调整以满足您的需求。

- 000

---

似乎可以工作 - 我很惊讶Bootstrap没有更好的内置支持。谢谢。 - cwd

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>

- Brent Washburne