Html 我可以在另一个 col 里面有一个 Bootstrap col 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29710013/
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
Can I have a Bootstrap col inside of another col?
提问by Christian Juth
I am still new to Bootstrap and I am trying to figure out what is correct and what is not. Is it acceptable to have a colinside of a col? In the example below, I have a form that I want to fit half of the screen. I also want certain form-control elements to be half size while other of full width. Would this be the correct way to go about this or is there a better way?
我还是 Bootstrap 的新手，我试图弄清楚什么是正确的，什么是不正确的。有col内部 a可以接受col吗？在下面的示例中，我有一个表单，我希望它适合屏幕的一半。我还希望某些表单控件元素为一半大小，而其他元素为全宽。这是解决这个问题的正确方法还是有更好的方法？
Example code:
示例代码：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<section class="row">
<div class="container">
<div class="col-xs-12 text-center">
<h1>Contact</h1>
</div>
<form class="col-xs-12 col-sm-8 col-sm-offset-2 form-horizontal">
<div class="form-group form-group-lg">
<div class="col-sm-12">
<input class="form-control" type="text" placeholder="name">
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-xs-6">
<input class="form-control" type="text" placeholder="email">
</div>
<div class="col-xs-6">
<input class="form-control" type="text" placeholder="website">
</div>
</div>
<button type="submit" class="btn btn-warning btn-lg pull-right col-xs-12">Submit</button>
</form>
</div>
</section>回答by TylerH
Yes, that's OK to have, according to Bootstrap's Grid Templateguide:
是的，根据 Bootstrap 的网格模板指南，可以这样做：
Two columns with two nested columns
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
两列有两个嵌套列
根据文档，嵌套很容易——只需在现有列中放置一行列。这为您提供了从桌面开始并缩放到大型桌面的两列，在较大的列中还有另外两列（等宽）。
在移动设备尺寸、平板电脑及以下尺寸时，这些列及其嵌套列将堆叠。
However, there is a point to a Bootstrap .row, which is to apply a negative margin in order to align content. If you don't mind gutters, or are capable of adjusting the columns yourself to account for this, then there's no point in adding a .rowcontainer for your nested columns.
但是， Bootstrap 有一个要点.row，即应用负边距以对齐内容。如果您不介意装订线，或者能够自己调整列以解决此问题，那么.row为嵌套列添加容器就毫无意义。
回答by mistykristie
You can have columns nested as many levels deep as you'd like, but they should generally be inside a row. The rows have negative margins to account for the padding on the columns, so if you have columns nested inside columns without a row in between, it will mess up the alignment of your page.
您可以根据需要将列嵌套到任意深度，但它们通常应该在一行内。行有负边距来解释列上的填充，因此如果列嵌套在列内而列之间没有行，则会弄乱页面的对齐方式。
