如何使用 bootstrap 将输入与最后一个标签行对齐

Question

我做了一个 bootstrap 表格，我想将我的输入与他的参考标签的最后一行文本对齐：

这是我的代码：

 <div class="form-group">
                            <label class="col-sm-2 control-label">Date de début des soins:</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" placeholder="Product name">
                            </div>
                            <div class="col-sm-1">
                            </div>
                            <label class="col-sm-2 control-label">Durée des soins:</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" placeholder="Product name">
                            </div>
                              <div class="col-sm-1">
                            </div>
                        </div>

https://jsfiddle.net/Tibuakaw/q945k4eg/

如何解决？

Answer 1

table 布局是一种快速的方法

<table>
    <tr>
        <td>Date de début des soins:</td>
        <td> <input type="text" class="form-control" placeholder="Product name"></td>
    </tr>
    <tr>
        <td>Durée des soins:</td>
        <td> <input type="text" class="form-control" placeholder="Product name"></td>
    </tr>
</table>

https://jsfiddle.net/g8m16v48/

Answer 2

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="form-group">
                    <div class="row">                      
                     <label class="col-sm-4 col-xs-4 control-label">Date de début des soins:</label>
                        <div class="col-sm-8 col-xs-8">
                            <input type="text" class="form-control" placeholder="Product name">
                        </div>
                        </div>
                        <div class="row">                            
                        <label class="col-sm-4 col-xs-4 control-label">Durée des soins:</label>
                        <div class="col-sm-8 col-xs-8">
                            <input type="text" class="form-control" placeholder="Product name">
                        </div>
                        </div>                              
                    </div>

Answer 3

.control-label{

float:left;
}

<div class="form-group">
                            <label class="col-sm-2 control-label">Date de début des soins:</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" placeholder="Product name">
                            </div>
                            <div class="col-sm-1">
                            </div>
                            <label class="col-sm-2 control-label">Durée des soins:</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" placeholder="Product name">
                            </div>
                              <div class="col-sm-1">
                            </div>
                        </div>

Answer 4

对于那些正在寻找答案的人：

你可以用 vertical-align: baseline 来做标签需要包裹在 inline-block 元素中，并且需要在外容器上设置 line-height。在下面的示例中，第一个使用的是 div，第二个使用的是 table。

.row {
  vertical-align: baseline;
}

.label {
  display: inline-block;
}


/* For demonstration purposes */

.label {
  width: 100px;
}

<div class="row" style="white-space: nowrap;">
  <span class="label" style="white-space: normal;">Date de début des soins:</span>
  <input type="text" class="form-control" placeholder="Product name">
</div>
<div class="row" style="white-space: nowrap;">
  <span class="label" style="white-space: normal;">Durée des soins:</span>
  <input type="text" class="form-control" placeholder="Product name">
</div>
<hr>
<table>
  <tr class="row">
    <td>
      <span class="label">Date de début des soins:</span>
    </td>
    <td>
      <input type="text" class="form-control" placeholder="Product name">
    </td>
  </tr>
  <tr class="row">
    <td><span class="label">Durée des soins:</span></td>
    <td>
      <input type="text" class="form-control" placeholder="Product name">
    </td>
  </tr>
</table>

https://jsfiddle.net/v9x3wote/

如何使用 bootstrap 将输入与最后一个标签行对齐

how to align input with the last label line with bootstrap

css

label

input

twitter-bootstrap