如何使用引导程序将输入与最后一个标签行对齐

Question

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 ?

Answer 1

A table layout is a quick way of doing it

<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

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/