twitter-bootstrap 引导程序 3.2 在同一行上的两列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24998564/
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
Two columns on same row with bootstrap 3.2
提问by sagesky36
I'm trying to place two columns on the same row with Bootstrap 3.2, but am not having any success.
我正在尝试使用 Bootstrap 3.2 在同一行上放置两列，但没有任何成功。
The format that I want is something like this: BeginDate: txbox1 EndDate: txtbox2
我想要的格式是这样的：BeginDate: txbox1 EndDate: txtbox2
My code is as follows, but I know it's incorrect.
我的代码如下，但我知道这是不正确的。
I would appreciate it very much for someone more experienced in Bootstrap for a solution.
对于在 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>
回答by Guillermo Gutiérrez
Bootstrap 3 has a 12 unit width column grid, so this means that each row can have up to 12 columns, and additional columns will be stacked below as another rows. You are setting 24 units (col-md-2+ col-md-10+ col-md-2+ col-md-10), so the second pair of columns are moving to another row (remember that the number post-fix in the class names indicates the column length). Reduce the units to 12, placing them within a "row" class div for completeness (it doesn't constraint that all the elements will be within a single row, though). For example:
Bootstrap 3 有一个 12 单位宽度的列 grid，所以这意味着每行最多可以有 12 列，额外的列将作为另一行堆叠在下面。您正在设置 24 个单位（col-md-2+ col-md-10+ col-md-2+ col-md-10），因此第二对列正在移动到另一行（请记住数字后缀在类名中表示列的长度）。将单位减少到 12，将它们放在一个“行”类 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>
回答by Christina
Demo: http://jsbin.com/yukut/1/edit
演示：http: //jsbin.com/yukut/1/edit
I think what you are looking for is the form-inline. Look at the docs: http://getbootstrap.com/css/#forms
我认为您正在寻找的是form-inline. 查看文档：http: //getbootstrap.com/css/#forms
<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>
回答by Jordan.J.D
I will make two changes to help you out. The first being to place the label inside the div otherwise you are actually making 4 columns (label, input, label, input). The second being that bootstraps gridsystemis broken into 12 columns per 1 row and your original code used 24 columns (2 label, 10 input, 2 label, 10 input). Check out the bootply here
我会做两个改变来帮助你。第一个是将标签放在 div 内，否则您实际上是在制作 4 列（标签、输入、标签、输入）。第二个是 bootstraps gridsystem每 1 行分成 12 列，您的原始代码使用 24 列（2 个标签，10 个输入，2 个标签，10 个输入）。在此处查看引导程序
Code
代码
<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>
