如何使用引導程序將輸入與最后一個標簽行對齊

Question

我制作了一個引導表單，我想將輸入內容與他的參考標簽的最后一行對齊：

這是我的代碼：

  <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>
    <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：基線將標簽包裹在inline-block元素中，並將行高設置在外部容器上。 在下面的示例中，第一個使用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/