Bootstrap表单内联不起作用

Question

我正在尝试添加这个简单的搜索表单,同时应用表单内联类,以便控件显示在彼此旁边,但我得到控件显示在彼此上方,搜索底部为白色,看起来很奇怪,所以有人可以告诉我我是什么我在这里不见了？

<div class="container">
    <div class="row">
          <div class="col-md-8">
                <form class="form-inline" action="#" method="post">
                    Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
                    <select id="searchon" name="searchon">
                        <option value="0">First Name</option>
                        <option value="1">Last Name</option>
                    </select>
                    <button type="submit" class="btn">Search</button>
                </form>       
          </div>      
    </div>
</div>

Answer 1

从Bootstrap引用,对于内联表单:

这仅适用于视口中至少为768像素宽的表单.

就你的布局而言,

<div class="container">
    <div class="row">
          <div class="col-md-8">
                <form class="form-inline" action="#" method="post">
                    Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
                    <select id="searchon" name="searchon">
                        <option value="0">First Name</option>
                        <option value="1">Last Name</option>
                    </select>
                    <button type="submit" class="btn">Search</button>
                </form>       
          </div>      
    </div>
</div>

它非常好..在线:

工作演示

Answer 2

我也有类似的问题form-inline。对我来说input-group，我form-inline努力将输入和按钮保持在一行中，而不是一个在另一个之上。

<form class="form-inline">
  <div class="input-group">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </div>
</form>