Twitter Bootstrap - < form>的两列布局 [英] Twitter Bootstrap - Two Column layout for <form>

问题描述

在Bootstrap 2.3中，是否有一个标准化的方法来为带有标签/输入/动作的HTML < form> 我在文档中没有看到任何内容。

In Bootstrap 2.3, is there a standardized way to have a two-column layout for an HTML <form> with labels/inputs/actions? I don't see any in the documentation.

我想要的示例图片： http://i.imgur.com/3o6IoN4.png

另外，我需要一个坚实的背景颜色 div.span12 或其他封闭容器的整个宽度。有两个 .span6 导致中心背景颜色中断（我想这可以通过包装两个 .span6 在 div.clearfix 中应用背景类？

As an aside, I need there to be a solid background color that spans the entire width of the div.span12 or other enclosing container. Having two .span6 causes a break in the background color in the center (which I suppose can be fixed by wrapping the two .span6 in a div.clearfix with the background class applied?

推荐答案

p> Easy stuff。将引导行置于父div中，并将该div的背景设置为您选择的颜色。

Easy stuff. Bring the bootstrap row within a parent div and set the background of that div to a color of your choosing.

标记：

<div id="background-color">
<form id="form1" name="form1" method="post" action=""><!-- START THE FORM -->
<div class="row-fluid">

<div class="span6"> <!-- FIRST COLUMN -->
<label>First Name</label>
  <label for="textfield"></label>
  <input type="text" />
  <label>Last Name</label>
  <label for="textfield"></label>
  <input type="text"  />
</div>

<div class="span6"> <!-- SECOND COLUMN -->
<label>Other</label>
  <label for="textfield"></label>
  <input type="text" />
  <label>Fields</label>
  <label for="textfield"></label>
  <input type="text"  />

  <input type="submit" name="button" id="button" value="Submit" />
</form> <!-- END THE FORM -->
</div>
</form>

</div> <!-- End row -->

</div> <!-- END BACKGROUND -->

CSS：

#background-color {background-color: #CCC;}

这有助于

I hope this helps

这篇关于Twitter Bootstrap - < form>的两列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！