導航欄引導程序中的全寬搜索欄

Question

我想在兩行中的左側獲得一個帶有徽標圖像的導航欄，並在右側獲得一些鏈接，在中間，我想要一個大的搜索欄。 我正在使用引導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

您可以對帶有搜索圖標的搜索欄使用以下代碼：（使用引導程序）

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