Question

부트 스트랩을 사용하여 Div에 헤더가있는 테이블을 만들 수 있습니까?

내가 테이블 형식으로이를 달성 할 수,하지만 부트 스트랩에서 "사업부"방법으로 같은를 만들 싶습니다 : 나는 다음과 같이 생성 된 구조를 가지고 노력하고 있어요. 나는 아래의 코드를 시도하지만, 데이터가 수평으로 표시되지 :

<form class='container' style='width:100%'><h2>Marks Tracker</h2> 

<div class='row'> 
<div class = 'col-xs-3'> <label class = 'control-label'>Select Session Number:</label></div> 
<div class = 'col-xs-3'>{{sessionNumberCtrl}}</div> 
<div class = 'col-xs-3'><label class = 'control-label'>Session Between<em style='color:red'>*</em>: </label></div> 
<div class = 'col-xs-3'>{{Team1Ctrl}} <label class= 'control-label'> vs </label> {{Team2Ctrl}} </div> 
</div> 
<div class='clearfix'></div> 

<div class='row'> 
<div class = 'col-xs-3'><label class = 'control-label'>Student Name:</label></div> 
<div class = 'col-xs-3'><label class = 'control-label'>Team:</label></div> 
<div class = 'col-xs-3'><label class = 'control-label'>Maths </label></div> 
<div class = 'col-xs-3'><label class = 'control-label'>Physics </label></div> 
<div class = 'col-xs-3'><label class = 'control-label'>Chemistry </label></div> 
<div class = 'col-xs-3'><label class = 'control-label'>option1/option2</label></div> 
<div class = 'col-xs-3'><label class = 'control-label'>Total</label></div> 
</div> 
<div class='clearfix'></div> 
</form> 

방법이 만들? 감사합니다.

Answer 1

col-xs-3은 여분의 소형 장치 (폭 < = 768 픽셀)에서만 컨테이너의 3/12를 차지할 것임을 의미합니다. col-sm-3 (너비> 768px)을 사용해보고 도움이되는지 확인해보세요.