减少导航栏； select 和按钮在同一行

Question

我正在使用 bootstrap 并遇到以下问题。我的导航栏中有一个 select 和一个按钮，当导航栏缩小（宽度 < 762）时，我希望它们在同一行上。

这是一个 jsfiddle：http://jsfiddle.net/vuwovq9g/

<div class="nav navbar-nav navbar-form">
    <select class="form-control">
        <option value="">Alphabétique</option>
        <option value="">Modification</option>
        <option value="">Création</option>
    </select></div><button type='button' style="margin-top:10px;" class="glyphicon glyphicon-sort-by-alphabet"></button>

当导航栏较小时，按钮位于 select 下方。我试图将按钮放在 div 内，但结果更糟（当导航栏很大时，按钮位于 select 下方）

Answer 1

jsfiddle demo

将 display:inline-block 添加到包含您的选择框的 div。这样 div 将折叠其宽度，因此按钮有 "room"。