Css 将引导组件排成一行

我在一个引导HTML页面上工作，我想在

BOOKS

下拉菜单的右侧内联放置一个搜索字段和按钮

但是，使用代码时，“搜索”按钮位于搜索字段的下方。提供了代码

<div id="navbar">

                <!-- left components of the navbar -->
                <ul class="nav navbar-nav navbar-left">


                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">BOOKS <span class="caret"></span></a>
                        <ul class="dropdown-menu">

                            <li><a href="#">BROWSE THE BOOKSELF</a></li>

                            <li class="divider" role="separator"></li>
                            <li><a href="#">STORE HOURS &amp; DIRECTIONS</a></li>
                            <li><a href="#">FAQ</a></li>
                        </ul>
                    </li>

                    <!-- book search -->
                    <form class="navbar-form">
                        <div class="form-group">
                            <input class="form-control" type="text" name="keyword" placeholder="Book Search">  
                        </div>
                        <button type="submit" class="btn btn-default">SEARCH</button>
                    </form>


                </ul>

                <!-- right components of the navbar -->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">SHOPPING CART</a></li>
                    <li><a href="#">MY ACCOUNT</a></li>
                    <li><a href="#">LOGOUT</a></li>
                </ul>
            </div>
            <!-- navbar div -->

---

使用

inlineflex

.navbar-form{
  display:inline-flex;
}

---

完成。

使用

内联flex

.navbar-form{
  display:inline-flex;
}

完成。

搜寻

搜寻

您知道这是否是一个混淆引导和Flexbox的问题吗？Flexbox更像是一个内容如何显示的布局。您知道这是否是混淆引导和Flexbox的问题吗？Flexbox更像是一个内容如何显示的布局。