twitter-bootstrap Twitter Bootstrap - <form> 的两列布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17158611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap - Two Column layout for <form>
提问by professormeowingtons
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.
在 Bootstrap 2.3 中，是否有一种标准化的方法可以为<form>带有标签/输入/操作的 HTML提供两列布局？我在文档中没有看到任何内容。
An example image of what I want: http://i.imgur.com/3o6IoN4.png
我想要的示例图像：http: //i.imgur.com/3o6IoN4.png
As an aside, I need there to be a solid background color that spans the entire width of the div.span12or other enclosing container. Having two .span6causes a break in the background color in the center (which I suppose can be fixed by wrapping the two .span6in a div.clearfixwith the background class applied?
顺便说一句，我需要有一个纯色的背景色，它跨越整个div.span12容器或其他封闭容器的整个宽度。有两个.span6会导致中心背景颜色中断（我认为可以通过将两个包裹在应用了背景类的.span6a 中来div.clearfix解决这个问题？
回答by user1702965
Easy stuff. Bring the bootstrap row within a parent div and set the background of that div to a color of your choosing.
容易的东西。将引导行放在父 div 中，并将该 div 的背景设置为您选择的颜色。
The Markup:
标记：
<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 -->
The CSS:
CSS：
#background-color {background-color: #CCC;}
I hope this helps
我希望这有帮助
回答by 2114L3
To my understanding for Bootstrap 3 these changes are required;
根据我对 Bootstrap 3 的理解，这些更改是必需的；
- all code sitting in container to access grid system info here
- span to col for new version
- use device class as suits your requirements info here
- labels and controls wrapped in form-group for spacing info here
- form class to form-horizontal removes the need for row divs (i have used nested columns without rows, seems to display correctly with form-horizontals function)
panel used to frame the form as pictured
<div class="container"> <div class="panel panel-default" style="background-color: #CCC"> <div class="panel-body"> <form id="form1" name="form1" method="post" action="" class="form-horizontal"><!-- START THE FORM --> <div class="col-sm-6"> <!-- FIRST COLUMN --> <div class="form-group"> <label for="inputFirstname" class="col-sm-4 control-label">First Name</label> <div class="col-sm-8"> <input type="text" class="form-control" id="inputFirstname" placeholder="First Name"> </div> </div> <div class="form-group"> <label for="inputLastname" class="col-sm-4 control-label">Last Name</label> <div class="col-sm-8"> <input type="text" class="form-control" id="inputLastname" placeholder="Last Name"> </div> </div> </div> <div class="col-sm-6"> <!-- SECOND COLUMN --> <div class="form-group"> <label for="inputEmail" class="col-sm-4 control-label">Email</label> <div class="col-sm-8"> <input type="text" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputUsername" class="col-sm-4 control-label">Username</label> <div class="col-sm-8"> <input type="text" class="form-control" id="inputUsername" placeholder="Username"> </div> </div> </div> </form> <!-- END THE FORM --> </div> </div><!-- END PANEL --> </div>
- 位于容器中的所有代码都可以在此处访问网格系统信息
- 新版本的跨度到 col
- 在此处使用适合您要求的设备类信息
- 标签和控件包装在表单组中，用于此处的间距信息
- form 类到 form-horizontal 消除了对行 div 的需要（我使用了没有行的嵌套列，似乎使用 form-horizontals 函数正确显示）
用于构建如图所示的表单的面板
<div class="container"> <div class="panel panel-default" style="background-color: #CCC"> <div class="panel-body"> <form id="form1" name="form1" method="post" action="" class="form-horizontal"><!-- START THE FORM --> <div class="col-sm-6"> <!-- FIRST COLUMN --> <div class="form-group"> <label for="inputFirstname" class="col-sm-4 control-label">First Name</label> <div class="col-sm-8"> <input type="text" class="form-control" id="inputFirstname" placeholder="First Name"> </div> </div> <div class="form-group"> <label for="inputLastname" class="col-sm-4 control-label">Last Name</label> <div class="col-sm-8"> <input type="text" class="form-control" id="inputLastname" placeholder="Last Name"> </div> </div> </div> <div class="col-sm-6"> <!-- SECOND COLUMN --> <div class="form-group"> <label for="inputEmail" class="col-sm-4 control-label">Email</label> <div class="col-sm-8"> <input type="text" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputUsername" class="col-sm-4 control-label">Username</label> <div class="col-sm-8"> <input type="text" class="form-control" id="inputUsername" placeholder="Username"> </div> </div> </div> </form> <!-- END THE FORM --> </div> </div><!-- END PANEL --> </div>
