인라인 형식의 부트 스트랩이 작동하지 않습니다.

Question

이것이 작동하지 않는 이유를 모르겠습니다. 이 두 폼 요소를 나란히 놓으려고합니다. 또한 일부 요소를 나란히 배치 할 수 있고 일부는 같은 형식으로 배열 할 수 있기를 원합니다 (향후 요소가이 두 가지 아래에 있음). 저는 Struts 1을 사용하고 있기 때문에 role = "form"을 생략했습니다. 이것은 <html:form> 태그를 깰 수 있습니다.

<form name="someForm" method="post" action="/someAction.do" class="form-inline"> 

<div class="form-group"> 
    <div> 
     <label for="startDate" >     
      From     
     </label>    
     <input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control"> 
    </div>   
</div> 
<div class="form-group"> 
    <div>   
     <label for="endDate">    
      To    
     </label>    
     <input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control"> 
    </div> 
</div> 

JSFiddle

Answer 1

:

<form name="someForm" method="post" action="/someAction.do" class="form-inline"> 
<div class="input-group"> 
    <div class="form-group"> 
     <div> 
      <label for="startDate" >     
       From     
      </label>    
      <input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control"> 
     </div>   
    </div> 
    <div class="form-group"> 
     <div>   
      <label for="endDate">    
       To    
      </label>    
      <input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control"> 
     </div> 
    </div> 
    </div> 
</form> 

http://jsfiddle.net/3h3NB/3/

편집 :

또는 당신은 grids를 사용하여 시도 할 수 있습니다 :

Online example

당신은 Twitter Bootstrap Forms 튜토리얼에 더 많은 예제를 찾을 수 있습니다 참조 531,

http://jsfiddle.net/3h3NB/76/

Answer 2

당신은 HTML

<form name="someForm" method="post" action="/someAction.do" class="form-inline"> 

<div class="form-group"> 
     <label for="startDate" >     
      From     
     </label>    
    <input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control"/> 

    </div> 
<div class="form-group"> 

     <label for="endDate">    
      To    
     </label>    
    <input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control"/> 
</div> 

에서이 작업을 수행하고, CSS

0123에서이 작업을 수행 할 수 있습니다

.form-group{ 
float:Left; 
} 

JSfiddle link 당신은 입력 그룹으로 컨트롤을 넣어야 할

Answer 3

는 Bootstrap3를 들어이

<form name="someForm" method="post" action="/someAction.do" class="form-horizontal"> 
    <div class="form-group"> 
    <div class="col-xs-20"> 
    <div cass="form-inline"> 
     <label for="startDate" class="col-xs-2 control-label">From</label> 
     <div class="col-xs-2"> 
     <input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="form-control" placeholder="From"> 
     </div> 
    </div> 
     </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-xs-20"> 
    <div class="form-inline"> 
     <label for="endDate" class="col-xs-2 control-label">To</label> 
     <div class="col-xs-2"> 
     <input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="form-control" placeholder="To"> 
      </div>  
    </div> 
     </div> 
    </div>  
</form> 

처럼 뭔가를 할 수 있습니다.