html - 内联表单 Bootstrap 不工作

Question

我不明白为什么这不起作用。我试图并排获取这两个表单元素。此外，我希望能够将一些元素并排放置，并将一些元素以相同的形式排列在下方(因为将来的元素将在这两个元素下方)。我离开了 role="form"因为我使用的是 Struts 1，这打破了 <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 :

<form>
    <div class="container">
        <div class="row">
            <div class="col-xs-1">
                <label for="startDate">from</lable>
            </div>
            <div class="col-xs-3">
                <input type="text" name="startDate" value="" readonly="readonly" id="startDate"class="datepicker form-control">
            </div>
            <div class="col-xs-1">
                <label for="endDate">to</lable>
            </div>
            <div class="col-xs-3">
                <input type="text" name="endDate" value="" readonly="readonly" id="startDate" class="datepicker form-control">
            </div>
        </div>
    </div>
</form> 

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