同一行上的两列与bootstrap 3.2

Question

我正在尝试使用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>

Answer 1

Bootstrap 3具有12个单位宽度的列网格,因此这意味着每行最多可以包含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>