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

Answer 2

将position:absolute;添加到搜索图标。

.search-button .glyphicon-search{
  position:absolute;
  top:20px;
  right:0;
}

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

2 个答案: