我正在尝试使用Bootstrap 3.2在同一行上放置两列,但是没有取得任何成功。
我想要的格式是这样的: BeginDate:txbox1 EndDate:txtbox2
我的代码如下,但我知道这是不正确的。
我非常感谢能够在Bootstrap中找到解决方案的人。
<label for="dteBeginDate" class="col-md-2 control-label">Begin Date:</label>
<div class="col-md-10">
<input type="date" id="dteBeginDate">
</div>
<label for="dteEndDate" class="col-md-2 control-label">End Date:</label>
<div class="col-md-10">
<input type="date" id="dteEndDate">
</div>
答案 0 :(得分:6)
Bootstrap 3 has a 12 unit width column grid,这意味着每行最多可包含12列,其他列将作为另一行堆叠在下方。您正在设置24个单位( col-md-2 + col-md-10 + col-md-2 + col- md-10 ),所以第二对列正在移动到另一行(请记住,类名中的后置修复数字表示列长度)。将单位减少到12,将它们放在&#34;行&#34; class div表示完整性(但它并没有约束所有元素都在一行内)。例如:
<div class="row">
<label for="dteBeginDate" class="col-md-2 control-label">Begin Date:</label>
<div class="col-md-4">
<input type="date" id="dteBeginDate">
</div>
<label for="dteEndDate" class="col-md-2 control-label">End Date:</label>
<div class="col-md-4">
<input type="date" id="dteEndDate">
</div>
</div>
答案 1 :(得分:2)
演示:http://jsbin.com/yukut/1/edit
我认为你要找的是form-inline
。查看文档:{{3}}
<form class="form-inline" role="form">
<div class="form-group">
<label for="begin_date">Begin Date:</label>
<input type="date" class="form-control" id="begin_date" placeholder="Start Date">
</div>
<div class="form-group">
<label for="end_date">End Date:</label>
<input type="date" class="form-control" id="end_date" placeholder="End Date">
</div>
</form>
答案 2 :(得分:1)
我会做两处修改来帮助你。第一个是将标签放在div中,否则你实际上是在制作4列(标签,输入,标签,输入)。第二个是bootstraps gridsystem每行分为12列,原始代码使用24列(2个标签,10个输入,2个标签,10个输入)。查看bootply here
<强>代码强>
<div class="container">
<div class="row">
<div class="col-md-6">
<label>Begin Date:</label>
<input type="date" id="dteBeginDate">
</div>
<div class="col-md-6">
<label>End Date:</label>
<input type="date" id="dteEndDate">
</div>
</div>
</div>