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

Answer 2

enter image description here

演示：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>

Answer 3

我会做两处修改来帮助你。第一个是将标签放在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>

同一行上的两列与bootstrap 3.2

3 个答案: