垂直佈置文本框和標籤引導程序

Question

引導程序新手，嘗試了很多東西，但無法在文本區域上方垂直對齊文本框和標籤。

<div class="container"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading">Estimate ID: 265</div> 
     <div class="panel-body"> 
<div class="form-inline "> 
    <div class="form-group"> 
     <label for="email">Job Title:</label> 
     <input type="email" class="form-control" id="email" placeholder="Enter Title"> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Location:</label> 
     <input type="password" class="form-control" id="pwd" placeholder="Enter Location"> 
    </div> 
    <div class="form-group"> 
     <label for="email">Approved Reference:</label> 
     <input type="email" class="form-control" id="email" placeholder="Enter Reference"> 
    </div> 

    </div> 



    <div class="form-group"> 
    <label for="comment">Description:</label> 
    <textarea class="form-control" rows="5" placeholder="Not more than 100 characters" id="comment"></textarea> 
</div> 


http://jsfiddle.net/6xH5s/66/ 

我應該添加自定義的CSS，是否不可能與引導CSS文件？

Answer 1

作爲新手，您應該閱讀bootstrap documentation並瞭解他們的網格系統，這非常有用。

您的solution。

<style> 
h2 { 
    margin-top: -1px; 
} 


</style> 

<div class="container"> 
<div class="row"> 


    <div class="panel panel-primary"> 
     <div class="panel-heading">Estimate ID: 265</div> 
     <div class="panel-body"> 
<div class="form-inline "> 
    <div class="form-group col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
     <label for="email">Job Title:</label> 
     <input type="email" class="form-control" id="email" placeholder="Enter Title"> 
    </div> 
    <div class="form-group col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
     <label for="pwd">Location:</label> 
     <input type="password" class="form-control" id="pwd" placeholder="Enter Location"> 
    </div> 
    <div class="form-group col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
     <label for="email">Approved Reference:</label> 
     <input type="email" class="form-control" id="email" placeholder="Enter Reference"> 
    </div> 
</div> 
    </div> 


    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 text-left"> 
    <label for="comment">Description:</label> 
    <textarea class="form-control" rows="5" placeholder="Not more than 100 characters" id="comment"></textarea> 
</div> 




</div> 
    </div> 

</div>