2014-10-28 26 views
2

引導程序中正確的方式使跨網格的輸入和標籤對齊正確的方式是什麼?Bootstrap 3 - 將文本與網格上的表單控件項對齊

我希望將標籤放在與第一列完全相同的位置。 見我普拉克:

http://plnkr.co/edit/jaMAp38Rr1g7BLW3R5AI

<div class="row"> 
    <div class="col-sm-6" style="border-style:solid;border-width:1px;"> 
    <form class="form-inline" role="form"> 
     <div class="form-group"> 
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;"> 
     <label>OK</label> 
     </div> 
    </form> 
    </div> 
    <div class="col-sm-6" style="border-style:solid;border-width:1px;"> 
    <form class="form-inline" role="form"> 
     <div class="form-group"> 
     <label>NOK</label>how to align it to the same as text 'OK'? 
     </div> 
    </form> 
    </div> 
</div> 

回答

7

Use .form-control-static

Plunkr:http://plnkr.co/edit/0uVL2IIglzV0mrhqZdla?p=preview

HTML:

<div class="row"> 
    <div class="col-sm-6" style="border-style:solid;border-width:1px;"> 
    <form class="form-inline"> 
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;"/> 
     <label for="exampleInputEmail1">OK</label> 
    </form> 
    </div> 
    <div class="col-sm-6" style="border-style:solid;border-width:1px;"> 
    <p class="form-control-static"><b>NOK</b></p> 
    </div> 
</div>