导航栏中的全宽搜索栏 bootstrap

Question

我想要一个导航栏，左边有徽标图像，右边有一些链接，排成两行，中间我想要一个大搜索栏。我正在使用 bootstrap 3.7.7。我设法在左边找到了标志，在右边找到了其他链接，但没有找到大搜索栏。我正在使用以下代码来实现相同的目的 -

<div class="navbar navbar-inverse navbar-fixed-top navcustom">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="logo" href="#">
                <img class="img-responsive" src="~/img/finalogo.png" class="img-responsive"/>
            </a>
        </div>
        <div class="navbar-collapse collapse" id="searchbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="about.html">About</a></li>
                <li><a href=""><i class="icon-user"></i> My Page</a></li>
                <li><a href="#loginform" data-toggle="modal">Login</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a title="Start a new search" href="#">Clear</a></li>
            </ul>
            <div class="form-group">
                <input class="form-control" type="text" placeholder="Search">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

但搜索栏大小不太好 -

需要帮助。谢谢

Answer 1

您可以对带有搜索图标的搜索栏使用以下代码:(使用Bootstrap)

<link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
 crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet"
 href=""
 integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
 crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
 integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
 crossorigin="anonymous"></script>


<div id="custom-search-input">
    <div class="input-group col-md-12">
        <input type="text" class="form-control input-lg" placeholder="Search" />
                <span class="input-group-btn">
                   <button class="btn btn-info btn-lg" type="button">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </span>
    </div>
</div>

导航栏中的全宽搜索栏 bootstrap

Full width searchbar in navbar bootstrap

html

css

jquery

navbar

twitter-bootstrap