内联形式Bootstrap不起作用 [英] inline form Bootstrap is not working

问题描述

我不明白为什么这不起作用。我试图让这两个表单元素并排。此外，我希望能够将一些元素并排排列，并将一些元素排列在同一个表单中（因为将来的元素将在这两个元素下面）。由于我使用的是Struts 1，所以我放弃了role =form，并且这打破了< html：form> 标记。

 < form name =someFormmethod =postaction =/ someAction.doclass =form-inline> 
 
< div class =form-group> 
< div> 
< label for =startDate> 
从
< / label> 
< input type =textname =startDatevalue =readonly =readonlyid =startDatestyle =width：70px; class =datepicker form-control> 
< / div> 
< / div> 
< div class =form-group> 
< div> 
< label for =endDate> 
至
< / label> 
< input type =textname =endDatevalue =readonly =readonlyid =endDatestyle =width：70px; class =datepicker form-control> 
< / div> 
< / div> 
  

JSFiddle

解决方案

到输入组：

 < form name =someFormmethod =postaction =/ someAction.do class =form-inline> 
< div class =input-group> 
< div class =form-group> 
< div> 
< label for =startDate> 
从
< / label> 
< input type =textname =startDatevalue =readonly =readonlyid =startDatestyle =width：70px; class =datepicker form-control> 
< / div> 
< / div> 
< div class =form-group> 
< div> 
< label for =endDate> 
至
< / label> 
< input type =textname =endDatevalue =readonly =readonlyid =endDatestyle =width：70px; class =datepicker form-control> 
< / div> 
< / div> 
< / div> 
< / 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 =textname =startDatevalue =readonly =readonlyid =startDateclass =datepicker form-control> 
< / div> 
< div class =col-xs-1> 
< label for =endDate>转换为< / lable> 
< / div> 
< div class =col-xs-3> 
< input type =textname =endDatevalue =readonly =readonlyid =startDateclass =datepicker form-control> 
< / div> 
< / div> 
< / div> 
< / form> 
  

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

I don't understand why this is not working. I'm trying to get these two form elements side by side. Also I would like to be able to have some elements side by side and some arranged below in the same form (as in future elements will be below these two). I left off the role="form" since I'm using Struts 1 and this breaks the <html:form> tag.

<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

解决方案

You have to put your controls into an input-group:

<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/

EDIT:

Or you can try using 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/

这篇关于内联形式Bootstrap不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！