Html 使用bootstrap 3.2在同一行上有两列

我试图用Bootstrap3.2将两列放在同一行上，但没有成功

我想要的格式如下： 开始日期：txbox1结束日期：TXBOX2

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

我非常感谢在引导解决方案方面更有经验的人。

<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>

开始日期：
结束日期：

，这意味着每行最多可以有12列，其他列将作为另一行堆叠在下面。您正在设置24个单位（col-md-2+col-md-10+col-md-2+col-md-10），因此第二对列将移动到另一行（请记住，类名中的数字后缀表示列长度）。将单位减少到12个，将它们放在一个“row”类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>

开始日期：
结束日期：

我将进行两项更改以帮助您解决问题。第一种方法是将标签放在div中，否则实际上会生成4列（label、input、label、input）。第二种情况是引导被分成每行12列，而您的原始代码使用了24列（2个标签，10个输入，2个标签，10个输入）。检查引导层

代码

<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>

开始日期：
结束日期：

演示：

我想你要找的是

表单内联

。看看这些文件：

开始日期：
结束日期：

   <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>