引导：垂直形式内的水平字段 [英] Bootstrap : horizontal fields inside vertical form

问题描述

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

I'd like to have some "horizontally styled" fields inside a "vertically styled" form with Bootstrap.

我该如何做？

推荐答案

您可以利用Bootstrap现有的类（ checkbox.inline ）得到你想要的效果。使它看起来正确的关键是在标签上指定 padding-left：0px; ：

You can leverage Bootstrap's existing classes (checkbox.inline)to get the effect you're looking for. The key to making it look right is to specify padding-left: 0px; on the labels:

  <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/ 了一个工作示例。

Please see http://jsfiddle.net/jhfrench/Hzucn/ for a working example.

我试图为您创建一个新类（沿着 .controls-row label.inline {padding-left：0px;} 的行，所以你不必在元素上做样式，所以如果你要使用这个解决方案，你可能想投入时间去解开...

I tried to create a new class for you (along the lines of .controls-row label.inline { padding-left: 0px;} so you wouldn't have to do styling on the element, but it caused more conflicts than I anticipated. So if you're going to use this solution pervasively, you might want to invest the time in untangling that...

这篇关于引导：垂直形式内的水平字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！