内联表单引导程序不起作用答案

【问题标题】：inline form Bootstrap is not working内联表单引导程序不起作用
【发布时间】：2014-07-22 14:12:25
【问题描述】：

我不明白为什么这不起作用。我正在尝试将这两个表单元素并排放置。此外，我希望能够将一些元素并排排列，一些元素以相同的形式排列在下方（因为未来的元素将位于这两个下方）。因为我使用的是 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

【问题讨论】：

您的 jsfiddle 缺少引导程序依赖项。

标签： html twitter-bootstrap

【解决方案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/

【讨论】：

这有效，但仅适用于页面的桌面显示。当我在移动设备上浏览它时，它会垂直堆叠。
@doug78 我扩展了我的答案
是的，你的小提琴很好用，看起来不错。但是，当我在我的代码中实现时，我得到了重叠，就像我添加到问题中的屏幕截图一样。由于您回答了原始问题，因此我将其标记为正确。谢谢。

【解决方案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 上执行此操作

 .form-group{
float:Left;
}

JSfiddle link

【讨论】：

这不是内联（即并排）

【解决方案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>

见Online example

您可以在Twitter Bootstrap Forms 教程中找到更多示例。

【讨论】：