css - Bootstrap：垂直表单内的水平字段

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;}这样的方式，您不必对元素进行样式设置，但它导致的冲突比我预期的要多。因此，如果您要普遍使用此解决方案，您可能想花时间解开那个...

Answer 2

您可以在引导程序中使用与 .form-horizo​​ntal 实现类似的格式。（在这里滚动播种到水平形式：http: //twitter.github.com/bootstrap/base-css.html#forms）

将标签和表单元素包装在分组 div 中（这就是 .control-group 在引导程序中的水平表单布局中所做的）。

向左浮动标签以与字段水平对齐显示它们。

label.horizontal {
  float: left;
  width: 160px;
  padding-top: 5px;
  margin-right: 20px;
  text-align: right;
}

在上面的示例中，具有 .horizo​​ntal 类的标签将是“水平样式”，其余的将是“垂直”或默认表单布局。

Answer 3

有一个类可以在 bootstrap 上使用！

检查这个例子：

<div class="span6">
  <form>
    <div class="controls controls-row">
      <input id="name" name="name" type="text" class="span3" placeholder="Name">
      <input id="email" name="email" type="email" class="span3" placeholder="Email address">
    </div>

   <div class="controls">
     <textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5"></textarea>
   </div>

   <div class="controls">
     <button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button>
   </div>

  </form>
</div>