bootstrap的響應(yīng)式導(dǎo)航條
當(dāng)導(dǎo)航欄內(nèi)存在表單的時(shí)候,使用響應(yīng)式導(dǎo)航條會(huì)出現(xiàn)兩個(gè)這樣的滾動(dòng)條,怎么避免這種情況的產(chǎn)生呢?
<div class="navbar navbar-inverse">
????<!--navbar-inverse和navabar-default,前者是黑色,后者是灰色-->
????<div class="navbar-header">
????????<button class="navbar-toggle" data-target="#hamb2" data-toggle="collapse">
????????????<span class="icon-bar"></span>
????????????<span class="icon-bar"></span>
????????????<span class="icon-bar"></span>
????????</button>
????????<div class="navbar-brand">
????????????<span class="highlight">7thHeaven</span>
????????????</div>
????</div>
????<div id="hamb2" class="collapse navbar-collapse navbar-responsive-collapse">
? ?????<ul class="nav navbar-nav">
? ? ? ?????<li class="active"><a href="#">Home</a></li>
? ? ? ?????????<li><a href="#">首頁(yè)</a></li>
????????????????<li class="btn-group">
????????????????<a href="" class="dropdown-toggle" data-toggle="dropdown">課程列表<span class="caret"></span></a>
????????????<ul class="dropdown-menu">
????????????????<li class="dropdown-header">前端</li>
????????????????<li><a href="#">HTML5</a></li>
? ? ????????????<li><a href="#">CSS3</a></li>
? ? ????????????<li><a href="#">Vue.js</a></li>
? ? ????????????<li><a href="#">JQuery</a></li>
? ? ????????????<li class="nav-divider"></li>
? ? ????????????<li class="dropdown-header">Java</li>
? ? ????????????<li><a href="#">Java</a></li>
? ? ????????????<li><a href="#">Java</a></li>
? ? ????????????<li><a href="#">Java</a></li>
? ? ????????????<li><a href="#">Java</a></li>
? ? ????????????<li class="nav-divider"></li>
? ? ????????????<li class="dropdown-header">Python</li>
? ? ????????????<li><a href="#">Python</a></li>
? ? ????????????<li><a href="#">Python</a></li>
? ? ????????????<li><a href="#">Python</a></li>
? ? ????????????<li><a href="#">Python</a></li>
????????????</ul>
????????</li>
????????<li><a href="#">聯(lián)系我們</a></li>
????????<li><a href="#">關(guān)于我們</a></li>
????????<li><a href="#">注冊(cè)</a></li>
????????<li><a href="#">登陸</a></li>
????????<form role="from" class="navbar-form navbar-right">
????????????<div class="form-group">
????????????????<input type="text" class="form-control" placeholder="請(qǐng)輸入..." />
????????????</div>
????????????<button class="btn btn-default">
????????????????搜索
????????????????<span class="glyphicon glyphicon-search"></span>
????????????</button>
????????</form>
????</ul>
????</div>
</div>
2018-06-28
<div class="navbar navbar-default" role="navigation">
? <div class="navbar-header">
? ? ? <!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容，即nav-collapse collapse樣式所在元素 -->
? ? ? ?<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
? ? ? ? ?<span class="sr-only">Toggle Navigation</span>
? ? ? ? ?<span class="icon-bar"></span>
? ? ? ? ?<span class="icon-bar"></span>
? ? ? ? ?<span class="icon-bar"></span>
? ? ? ?</button>
? ? ? ?<!-- 確保無(wú)論是寬屏還是窄屏，navbar-brand都顯示 -->
? ? ? ?<a href="##" class="navbar-brand">慕課網(wǎng)</a>
? </div>
? <!-- 屏幕寬度小于768px時(shí)，div.navbar-responsive-collapse容器里的內(nèi)容都會(huì)隱藏，顯示icon-bar圖標(biāo)，當(dāng)點(diǎn)擊icon-bar圖標(biāo)時(shí)，再展開。屏幕大于768px時(shí)，默認(rèn)顯示。 -->
? <div class="collapse navbar-collapse navbar-responsive-collapse">
? ? <ul class="nav navbar-nav">
? ? ? <li class="active"><a href="##">網(wǎng)站首頁(yè)</a></li>
? ? ? <li><a href="##">系列教程</a></li>
? ? ? <li><a href="##">名師介紹</a></li>
? ? ? <li><a href="##">成功案例</a></li>
? ? ? <li><a href="##">關(guān)于我們</a></li>
</ul>
<form action="##" class="navbar-form navbar-left" rol="search">
? ? ? ? <div class="form-group">
? ? ? ?<input type="text" class="form-control" placeholder="請(qǐng)輸入關(guān)鍵詞" />
? ? ? ? </div>
? ? ? ? <button type="submit" class="btn btn-default">搜索</button>
? ? </form>
? </div>
</div>
我沒(méi)有出現(xiàn)這個(gè)問(wèn)題啊