我正在尝试移交 Bootstrap 3,但我在网格的新类方面遇到了困难。以前版本的 Bootstrap 允许您通过添加 span-* 类来设置输入的宽度,因此如果您想将两个输入放在同一表单列上,添加 span-2 和 span-10 即可完成工作。我正在尝试使用 bootstrap 3 执行此操作,但我没有得到与您在此看到的相同的结果fiddle http://jsfiddle.net/FXEW3/,我想将选择和输入设置在同一列上。我希望标签位于输入顶部,因此添加inline class
到表格不起作用。
我在这里缺少什么?
提前欢呼和感谢
http://jsbin.com/esewOyo/1/ http://jsbin.com/esewOyo/1/
大多数人无法相信涉及到多少个类,但表单控制始终是 100%,因此每个类都必须进入一个 col--类,如果您想将元素放在同一行,在这种情况下,您可以使用包含列的嵌套行,如下所示:
<div class="container">
<form role="form">
<div class="row my-row">
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label> </label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
</div>
</form>
</div>
因为排水沟太宽了,不适合我的口味:
.row.my-row, .row.my-row .row {
margin-left:-1%;
margin-right:-1%
}
.row.my-row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
.row.my-row .row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)