搜索结果正在破坏Bootstrap中的Navbar

Question

我正在尝试使用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>

任何人都可以帮助我如何显示谷歌的结果

可能是我错过了一些东西，我还在学习。

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

这有助于我解决问题