텍스트 상자와 레이블을 세로로 배열하십시오.

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>