Bootstrap内嵌表单的提交按钮不在同一行 [英] Bootstrap inline form's submit button not in the same line

问题描述

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

I tried to use Bootstrap's inline form but oddly the submit button can't be put on the same line with other input items. I had been searching for solutions but didn't find one yet.

这是我的HTML代码：

Here is my HTML code:

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

b $ b

有人可以帮我把内容与其他项目一起提交吗？非常感谢！

Can somebody help me to inline the submit button with the other items? Thanks a lot!

推荐答案

将按钮放在< 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>

这篇关于Bootstrap内嵌表单的提交按钮不在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！