テキストボックスとラベルを垂直にブートストラップする

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>