javascript - Bootstrap 将 glyphicon 包装在导航栏的第二行

Question

我正在尝试在我的 Bootstrap 网站上设置一个搜索框，该搜索框在按下搜索字形图标时隐藏和显示(隐藏和显示部分有效)，但是当呈现输入框时，字形图标移动到导航栏中的第二行:

这是我的代码:

<nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="index.php" class="navbar-brand"></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="home nav-item">
                            <a href="index.php">
                                <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home
                            </a>
                        </li>
                        <li class="products nav-item">
                            <a href="products.php">
                                <span class="glyphicon glyphicon-glass" aria-hidden="true"></span> Products
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav-item">
                            <a title="Search" class="search-button">
                                <div class="search"><input type="text" name="search" class="form-control" placeholder="Search..."></div>
                                <span class="glyphicon glyphicon-search"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

管理隐藏和显示过程的 JavaScript 代码如下所示:

var $search = $(".search");
    $search.hide();
    $(".glyphicon-search").click(function(){
        if ($search.is(":hidden")){
            $search.fadeIn();
        } else {
            $search.fadeOut();
        }
})

我该如何解决这个问题？我已经使用 Chrome 控制台进行了一些反复试验，但没有找到解决方案。

这是演示我的问题的 JSFiddle 的链接:https://jsfiddle.net/bu3kqL0d/1/

Answer 1

默认情况下，div 是 display: block，这就是为什么 glyphicon 被推到下一行的原因。尝试:

.search { display: inline-block; }