css - Bootstrap : horizontal fields inside vertical form

Question

我想在 Bootstrap 的“垂直样式”表单中添加一些“水平样式”的字段。

我该怎么做(如果可能)？

Answer 1

您可以利用 Bootstrap 的现有类 (checkbox.inline) 来获得您正在寻找的效果。让它看起来正确的关键是在标签上指定 padding-left: 0px;:

  <div class="control-group">
    <div class="controls">
      <label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label>
      <label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label>
    </div>
  </div>

请参阅http://jsfiddle.net/jhfrench/Hzucn/一个工作示例。

我尝试为您创建一个新类(按照 .controls-row label.inline { padding-left: 0px;} 这样您就不必在元素，但它引起的冲突比我预期的要多。因此，如果您要普遍使用此解决方案，您可能需要花时间来解决这个问题...