html - bootstrap 3.2 同一行上的两列

Question

我尝试使用 Bootstrap 3.2 将两列放在同一行，但没有成功。

我想要的格式是这样的: 开始日期:txbox1 结束日期:txbox2

我的代码如下，但我知道它不正确。

如果有经验丰富的 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 has a 12 unit width column 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>