Twitter Bootstrap - <form>的两列布局

pro*_*ons 6 html css twitter-bootstrap

在Bootstrap 2.3中,是否有一种标准化方法可以为<form>带有标签/输入/操作的HTML 提供双列布局?我在文档中没有看到任何内容.

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

另外,我需要有一个坚实的背景颜色,跨越整个div.span12或其他封闭容器的宽度.有两个.span6导致中心的背景颜色中断(我想可以通过将两个包装在应用了背景类的.span6a中来修复)div.clearfix

use*_*965 15

简单的东西.将引导行放在父div中,并将该div的背景设置为您选择的颜色.

标记:

<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 -->
Run Code Online (Sandbox Code Playgroud)

CSS:

#background-color {background-color: #CCC;}
Run Code Online (Sandbox Code Playgroud)

我希望这有帮助

  • 这在Bootstrap 3中如何工作?我只使用col-xs-6吗? (4认同)