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

您可以在bootstrap中使用类似格式的.form-horizontal实现。（滚动播放到水平表单：http://twitter.github.com/bootstrap/base-css.html#forms）

将标签和表单元素包装在分组div中（这就是.control-group在bootstrap中的Horizontal Form布局中的作用）。

将浮动标签留下以显示它们与字段水平对齐。

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

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

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>

Bootstrap：垂直形式内的水平字段

3 个答案: