css - 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 引用， for inline forms :

This only applies to forms within viewports that are at least 768px wide.

就您的布局而言，

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

它非常好..内联:

working demo