bootstrap的響應式導航條
當導航欄內存在表單的時候,使用響應式導航條會出現兩個這樣的滾動條,怎么避免這種情況的產生呢?
<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="#">首頁</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="#">聯系我們</a></li>
????????<li><a href="#">關于我們</a></li>
????????<li><a href="#">注冊</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="請輸入..." />
????????????</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收縮的內容，即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>
? ? ? ?<!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 -->
? ? ? ?<a href="##" class="navbar-brand">慕課網</a>
? </div>
? <!-- 屏幕寬度小于768px時，div.navbar-responsive-collapse容器里的內容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大于768px時，默認顯示。 -->
? <div class="collapse navbar-collapse navbar-responsive-collapse">
? ? <ul class="nav navbar-nav">
? ? ? <li class="active"><a href="##">網站首頁</a></li>
? ? ? <li><a href="##">系列教程</a></li>
? ? ? <li><a href="##">名師介紹</a></li>
? ? ? <li><a href="##">成功案例</a></li>
? ? ? <li><a href="##">關于我們</a></li>
</ul>
<form action="##" class="navbar-form navbar-left" rol="search">
? ? ? ? <div class="form-group">
? ? ? ?<input type="text" class="form-control" placeholder="請輸入關鍵詞" />
? ? ? ? </div>
? ? ? ? <button type="submit" class="btn btn-default">搜索</button>
? ? </form>
? </div>
</div>
我沒有出現這個問題啊