搜索结果破坏了 Bootstrap 中的导航栏

Posted 2023-02-24

【中文标题】搜索结果破坏了 Bootstrap 中的导航栏

【英文标题】：Search Result Is breaking the Navbar in Bootstrap

【发布时间】：2017-02-02 07:33:20

【问题描述】：

我正在尝试使用 ajax 和 php 在搜索框中显示结果，一切正常，但在显示结果时出现问题，它只是破坏了导航栏。

这是导航条码

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <div class="col-sm-6 col-md-6">
    <form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" onkeyup="showresult(this.value)" name="q" autocomplete='off'>
        <div id="livesearch"></div>
        <div class="input-group-btn"><button class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
        </div>
        </form>


</div>
<ul class="nav navbar-nav navbar-right">
/*code Reducted */



<li><a href="kart.php">  <span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</a></li>
</ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

谁能帮我如何显示谷歌的结果

可能是我遗漏了一些东西，我还在学习。

【参考方案1】：

好吧，我用谷歌努力并得到答案

#livesearch

    position: absolute;
    width: auto; 
    background: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    max-height: 200px;
    overflow-y: auto;

    border: 1px solid gray;

    /*This is relative to the navbar now*/
    left: 0;
    right: 0;
    top: 40px;

这有助于我解决问题