CSS Bootstrap 3：如何在列内使用表单组？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26304184/
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: How are form-groups meant to be used inside of columns?
提问by greenie2600
I'm using Bootstrap 3, and I have a fairly standard page layout: one wide column on the left (.col-md-8), containing plain text, and one narrower column on the right (.col-md-4), containing a form.
我正在使用 Bootstrap 3，并且我有一个相当标准的页面布局：左侧的一个宽列 ( .col-md-8) 包含纯文本，右侧的一个较窄的列 ( .col-md-4) 包含一个表单。
Each of the form fields, in turn, is wrapped in a .form-group.
反过来，每个表单字段都包装在一个.form-group.
In my first attempt, the .form-groupswere spilling over the left and right edges of the containing column. (Make sure the JSFiddle preview frame is at least as wide as Bootstrap's sm breakpoint.) I've added a pink background div to show the box that the .form-groupsshouldbe staying within.
在我的第一次尝试中，.form-groups它们溢出了包含列的左右边缘。（确保 JSFiddle 预览框架至少与 Bootstrap 的 sm 断点一样宽。）我添加了一个粉红色背景 div 来显示.form-groups应该留在其中的框。
In my second attempt, I added a .containerinside of the .col-md-4, then wrapped each .form-groupinside of a .rowanda .col-md-4.
在我的第二次尝试中，我添加了 a 的.container内部.col-md-4，然后将每个包裹.form-group在 a.row和a内部.col-md-4。
This does the trick, but...is this the correct and preferred way? It seems like an awful lot of extra, boilerplate markup to achieve something that should just kinda happen naturally.
这可以解决问题，但是......这是正确和首选的方式吗？似乎有很多额外的样板标记来实现应该自然发生的事情。
The Bootstrap docs are pretty good, but they gloss over some of the "big picture" stuff like this. Maybe this stuff is obvious to folks who are already experienced with responsive CSS, but it can be pretty confusing for a beginner like me.
Bootstrap 文档非常好，但它们掩盖了一些像这样的“大图”。也许这些东西对于已经使用过响应式 CSS 的人来说是显而易见的，但对于像我这样的初学者来说可能会非常混乱。
Here's the code from my first attempt:
这是我第一次尝试的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</script>
<head>
<body>
<div class="container">
<h1>Broken version</h1>
<h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>
<div class="row">
<div class="col-md-8">
<div style="background-color: orange;">
<p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
</div>
</div> <!-- .col-md-8 -->
<div class="col-md-4">
<div style="background-color: pink;">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name">
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- pink background div -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
</div> <!-- .container -->
</body>
</html>
And here's the code from my second, possibly corrected attempt:
这是我第二次尝试的代码，可能更正了：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<div class="container">
<h1>Corrected (?) version</h1>
<h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>
<div class="row">
<div class="col-md-8">
<div style="background-color: orange;">
<p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
</div>
</div> <!-- .col-md-8 -->
<div class="col-md-4">
<div style="background-color: pink;">
<div class="container">
<form role="form" class="form-horizontal">
<div class="row">
<div class="form-group col-md-4">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label class="control-label" for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- .container -->
</div> <!-- .pink background div -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
</div> <!-- .container -->
</body>
</html>
回答by Christina
Both previous answers lack reading the Bootstrap docs.
之前的两个答案都没有阅读 Bootstrap 文档。
You are not required to use .form-horizontalso don't because this is not a .form-horizontalsituation. Look at the docs for .form-horizontalexamples, this is not where you would use that class. Use no class on your form then you don't need the .container to zero out the negative margin on the .form-group.
你不需要使用.form-horizontal所以不要因为这不是一种.form-horizontal情况。查看文档以获取.form-horizontal示例，这不是您使用该类的地方。在您的表单上不使用任何类，那么您不需要 .container 将 .container 上的负边距归零.form-group。
http://jsfiddle.net/fr6p90ar/6/
http://jsfiddle.net/fr6p90ar/6/
Same as yours without .form-horizontaland with without nested .container (read the docs).
与没有.form-horizontal和没有嵌套 .container 的相同（阅读文档）。
also this:
还有这个：
<div class="form-group col-md-4">
is like putting a column class on a .row, it will mess things up significantly.
就像将列类放在 .row 上一样，它会将事情弄得一团糟。
Just use:
只需使用：
<div class="form-group">
回答by Birgit Martinelle
This should help (from the boostrap doc: http://getbootstrap.com/css/#forms-horizontal
这应该会有所帮助（来自 boostrap 文档：http://getbootstrap.com/css/#forms-horizontal
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
通过将 .form-horizontal 添加到表单，使用 Bootstrap 的预定义网格类在水平布局中对齐标签和表单控件组。这样做会将 .form-groups 更改为网格行，因此不需要 .row。
so considering this you can clean up your html quite a bit - and you can also remove the container. Here's a fiddle to a little bit cleaner version of your form: http://jsfiddle.net/fr6p90ar/2/
所以考虑到这一点，你可以清理你的 html - 你也可以删除容器。这是一个更简洁的表单版本的小提琴：http: //jsfiddle.net/fr6p90ar/2/
<div class="col-md-4" style="background-color: pink;">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name"/>
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input class="text form-control" type="email" name="email" id="email"/>
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- .col-md-4 -->
