我对 Bootstrap 还是个新手，我正在尝试找出什么是正确的，什么是错误的。是否可以接受col里面的一个col？在下面的示例中，我有一个表单想要适合屏幕的一半。我还希望某些表单控制元素为半角，而其他元素为全角。这是解决这个问题的正确方法还是有更好的方法？
示例代码：
<!-- 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>
是的，根据 Bootstrap 的说法，这是可以的网格模板 http://getbootstrap.com/examples/grid/ guide:
两列和两个嵌套列
--
根据文档，嵌套很简单 - 只需将一行列放入现有列中即可。这为您提供了两列，从桌面开始并扩展到大型桌面，在较大的列中还有另外两列（宽度相等）。
在移动设备尺寸、平板电脑及以下设备上，这些列及其嵌套列将堆叠。
然而，Bootstrap 有一点.row，即应用负边距以对齐内容。如果您不介意装订线，或者能够自己调整列来解决这一问题，那么添加.row嵌套列的容器。您可以将 .row 类放在与.col也删除这些排水沟（感谢额外的 https://stackoverflow.com/users/6680521/extragorey指出这一点）。
同样，不将列包装在行中将导致某些属性无法正确应用，例如flex上的属性.col class. .row has display: flex，任何具有 flex 属性的子项都需要应用这些属性......否则它们将被忽略。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
