垂直布置文本框和标签引导程序

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>