Html Bootstrap 3 2 列表单布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21032759/
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
Bootstrap 3 2-column form layout
提问by Michael Mahony
I am still learning the proper use of Bootstrap 3 and was wondering if you all could help me out. I would like a layout something like this:
我仍在学习如何正确使用 Bootstrap 3，想知道你们是否可以帮助我。我想要这样的布局：
Label Label
Textbox Textbox
Label Label
Textbox Textbox
Label Label
Textbox Textbox Textarea
I know that if I use the .form-group it will allow me to accomplish the Label over the top of the textbox. How can I assure that this happens in a column yet allows for some inline things like the example with the two textboxes alongside each other?
我知道如果我使用 .form-group 它将允许我完成文本框顶部的标签。我如何确保这发生在一列中，但允许一些内联内容，例如两个文本框并排的示例？
回答by Mustex
As mentioned earlier, you can use the grid system to layout your inputs and labels anyway that you want. The trick is to remember that you can use rows within your columns to break them into twelfths as well.
如前所述，您可以根据需要使用网格系统来布置您的输入和标签。诀窍是记住，您也可以使用列中的行将它们分成十二分之一。
The example below is one possible way to accomplish your goal and will put the two text boxes near Label3 on the same line when the screen is small or larger.
下面的示例是实现目标的一种可能方法，当屏幕较小或较大时，会将靠近 Label3 的两个文本框放在同一行上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text"/>
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text"/>
</div>
<div class="col-xs-6">
<div class="row">
<label class="col-xs-12">Label3</label>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<input class="form-control" type="text"/>
</div>
<div class="col-xs-12 col-sm-6">
<input class="form-control" type="text"/>
</div>
</div>
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text"/>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>回答by Yooz
You could use the bootstrap grid system :
您可以使用引导网格系统：
<div class="col-md-6 form-group">
<label for="textbox1">Label1</label>
<input class="form-control" id="textbox1" type="text"/>
</div>
<div class="col-md-6 form-group">
<label for="textbox2">Label2</label>
<input class="form-control" id="textbox2" type="text"/>
</div>
<span class="clearfix">
http://getbootstrap.com/css/#grid
http://getbootstrap.com/css/#grid
Is that what you want to achieve?
这就是你想要达到的目标吗？
回答by Manik
You can use the bootstrap grid system. as Yoann said
您可以使用引导网格系统。正如约安所说
<div class="container">
<div class="row">
<form role="form">
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Name">
</div>
<div class="clearfix"></div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
</form>
<div class="clearfix">
</div>
</div>
</div>
