Bootstrap 3 2列表单布局 [英] Bootstrap 3 2-column form layout
问题描述
我仍然在学习如何正确使用Bootstrap 3，并且想知道你是否可以帮助我。我想要一个像这样的布局：
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:
Label Label
Textbox Textbox
Label Label
Textbox Textbox
Label Label
Textbox Textbox Textarea
我知道如果我使用.form-group，它将允许我在文本框的顶部完成Label。
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?
推荐答案
下面的例子是一个可能的方法来完成你的目标，
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.
<!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>
http://jsfiddle.net/m3u8bjv0/2/
这篇关于Bootstrap 3 2列表单布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
