我仍然是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的
Grid Template指南：
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.
