使用bootstrap 3.2在同一行上的两列 [英] Two columns on same row with bootstrap 3.2

问题描述

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

I'm trying to place two columns on the same row with Bootstrap 3.2, but am not having any success.

我想要的格式是这样的：
BeginDate：txbox1 EndDate：txtbox2

The format that I want is something like this: BeginDate: txbox1 EndDate: txtbox2

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

My code is as follows, but I know it's incorrect.

对于在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>

推荐答案

Bootstrap 3具有12个单位宽度的列网格，因此这意味着每一行最多可以包含12列，其他列将作为另一行堆叠在下面。您正在设置24个单位（ col-md-2 + col-md-10 + col-md-2 + col- md-10 ），因此第二对列将移至另一行（请记住，类名中的后缀数字表示列的长度）。将单位减少到12，以确保完整性（将其放置在行类div中，但并不限制所有元素都位于同一行中）。例如：

Bootstrap 3 has a 12 unit width column grid, so this means that each row can have up to 12 columns, and additional columns will be stacked below as another rows. You are setting 24 units (col-md-2 + col-md-10 + col-md-2 + col-md-10), so the second pair of columns are moving to another row (remember that the number post-fix in the class names indicates the column length). Reduce the units to 12, placing them within a "row" class div for completeness (it doesn't constraint that all the elements will be within a single row, though). For example:

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

这篇关于使用bootstrap 3.2在同一行上的两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！