如何使用bootstrap将输入与最后一个标签行对齐(how to align input with the last label line with bootstrap)

如何使用bootstrap将输入与最后一个标签行对齐(how to align input with the last label line with bootstrap)

我做了一个引导表单，我希望将我的输入与他的refferencial标签的最后一行文本对齐：

这是我的代码：

 <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/ 
 
 怎么解决？ 
 
  
I've made a bootstrap form, and i want align my input with the last text line of his refferencial label: 
 
this is my code: 
 
 
 
  
  
 <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/
 
how to fix it ?
 

                
最满意答案
                
                    
                        
 对于那些寻找答案的人： 
 
 您可以使用vertical-align：baseline执行此操作标签需要包含在内联块元素中，并且需要在外部容器上设置行高。 在下面的示例中，第一个使用div，第二个使用表。 
 
 
 
  
  
.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/ 
For those looking for the answer to this:
 
You can do it with vertical-align: baseline The label needs to be wrapped in an inline-block element and the line-height needs to be set on the outer container. In the sample below, the first one is using divs, the second is using a 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/