同一行上的两列与bootstrap 3.2

时间:2014-07-28 15:22:25

标签: html5 twitter-bootstrap-3

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

3 个答案:

答案 0 :(得分:6)

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>

答案 1 :(得分: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>

答案 2 :(得分:1)

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