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屋!