Bootstrap内联表单的提交按钮不在同一行

Question

我尝试使用Bootstrap的内联表单，但奇怪的是提交按钮不能与其他输入项放在同一行。我一直在寻找解决方案，但还没有找到解决方案。

这是我的HTML代码：

<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
    <input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
    <input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
   <input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
    Status: <select class="selectpicker" id="status" name="status" >
          <option value="All">ALL</option>
          <option value="Successful">Successful</option>
          <option value="Unsuccessful">Unsuccessful</option>
    </select>
   </div>
    <div class="form-group">
    Direction: <select class="selectpicker" id="direction" name="direction">
          <option value="All">All</option>
          <option value="IN">In</option>
          <option value="OUT">Out</option>
    </select>
    </div>
    <button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
    </form>

有人可以帮我用其他项内联提交按钮吗？非常感谢！

Answer 1

将您的按钮放在<div class="form-group">

中

<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
    <input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
    <input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
   <input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
    Status: <select class="selectpicker" id="status" name="status" >
          <option value="All">ALL</option>
          <option value="Successful">Successful</option>
          <option value="Unsuccessful">Unsuccessful</option>
    </select>
</div>
<div class="form-group">
    Direction: <select class="selectpicker" id="direction" name="direction">
          <option value="All">All</option>
          <option value="IN">In</option>
          <option value="OUT">Out</option>
    </select>
</div>
<div class="form-group">
    <button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
</div>
</form>

Answer 2

我将您的表单复制到测试项目中并正确引导了提交按钮。另外，我对你上面的html做了一些修改。我从＆＃34;按钮＆＃34;中删除了终结符。提交按钮上的元素，我删除了文本框上的额外引号，其ID为＆＃34;数字＆＃34;。在表格组内部或外部移动按钮对我没有任何影响。

在测试和查看链接时，我注意到引导程序将表单包装在适当的媒体宽度边界上。确保您的表单不仅仅是包装，就像它应该的那样。如果它是包装，请使用折叠减少表单的水平占用空间。

这里的bootstrap文档中有一个例子...... http://getbootstrap.com/components/#navbar-default