css - 将 Bootstrap 组件排成一行

Question

我在 Bootstrap 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 -->

这是使用代码后的样子，

如何将搜索按钮放在输入框的右侧？

UPDATE

如果我把 <button>在<div>里面标签，它看起来像下面的整体和不可取的。

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

Answer 1

使用inline-flex

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

完成guide of flexbox .