首頁猿問大神回答一下這個問題？

大神回答一下這個問題？

Bootstrap

慕粉笑瞇瞇愛生活 2016-10-15 15:46:07

讓導航條固定在頂部給body設置了padding-top：70px 為啥還是會遮住內容呢？請大家復制我的代碼幫我看一下謝謝了<!DOCTYPE html><html>? <head>??? <meta charset="utf-8">??? <meta http-equiv="X-UA-Compatible" content="IE=edge">??? <meta name="viewport" content="width=device-width, initial-scale=1">??? <title>現(xiàn)代瀏覽器博物館</title>??? ??? <link href="css/bootstrap.min.css" rel="stylesheet">??? ??? <style>?????? body{????? ??? ?padding-top:70px;?????? }??? </style>? </head>? <body>?? <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">? <div>??? ??? <div>????? <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">??????? <span>Toggle navigation</span>??????? <span></span>??????? <span></span>??????? <span></span>????? </button>????? <a href="#">現(xiàn)代瀏覽器博物館</a>??? </div>??? ??? <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">????? <ul class="nav navbar-nav">??????? <li><a href="#">綜述</a></li>??????? <li><a href="#">簡述</a></li>??????? <li>????????? <a href="#" data-toggle="dropdown">特點 <span></span></a>????????? <ul role="menu">??????????? <li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li>?? ??? ??? ?<li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li>?? ??? ??? ?<li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li>?? ??? ??? ?<li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li>?? ??? ??? ?<li><a href="#feature-tab" data-tab="tab-ie">IE</a></li>????????? </ul>??????? </li>??????? <li><a href="#">關于</a></li>????? </ul>??? </div>? </div></nav><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p><p>dfghjkjhgfds</p><p>1111111111111</p><p>2222222222222222222222</p>??? ??? <script src="js/jquery-1.11.1.min.js"></script>??? ??? <script src="js/bootstrap.min.js"></script>? </body></html>

查看完整描述

3 回答

幕布斯7574896

TA貢獻38條經驗獲得超3個贊

因為你的導航欄不符合bootstrap的規(guī)范，導致元素錯位。你要是設置padding-top一個足夠大的數(shù)字，也是可以顯示的，不過這也是錯誤的，正確的方式還是添加相應類名：

<nav?class="navbar?navbar-inverse?navbar-fixed-top"?role="navigation">
??<div?class="navbar-header>
????<!--?Brand?and?toggle?get?grouped?for?better?mobile?display?-->
????<div>
??????<button?type="button"?class="navbar-toggle"?data-toggle="collapse"
????????????????data-target="#example-navbar-collapse">
????????????<span?class="sr-only">切換導航</span>
????????????<span?class="icon-bar"></span>
????????????<span?class="icon-bar"></span>
????????????<span?class="icon-bar"></span>
??????</button>
??????<a?class="navbar-brand"?href="#">現(xiàn)代瀏覽器博物館</a>
????</div>
????<!--?Collect?the?nav?links,?forms,?and?other?content?for?toggling?-->
????<div?class="collapse?navbar-collapse"?id="bs-example-navbar-collapse-1">
??????<ul?class="nav?navbar-nav">
????????<li><a?href="#">綜述</a></li>
????????<li><a?href="#">簡述</a></li>
????????<li?class="dropdown">
??????????<a?class="dropdown-toggle"?href="#"?data-toggle="dropdown">特點?<span?class="caret"></span></a>
??????????<ul?class="dropdown-menu"?role="menu">
????????????<li><a?href="#feature-tab"?data-tab="tab-chrome">Chrome</a></li>
????????????<li><a?href="#feature-tab"?data-tab="tab-firefox">Firefox</a></li>
????????????<li><a?href="#feature-tab"?data-tab="tab-safari">Safari</a></li>
????????????<li><a?href="#feature-tab"?data-tab="tab-opera">Opera</a></li>
????????????<li><a?href="#feature-tab"?data-tab="tab-ie">IE</a></li>
??????????</ul>
????????</li>
????????<li><a?href="#">關于</a></li>
??????</ul>
????</div><!--?/.navbar-collapse?-->
??</div><!--?/.container-fluid?-->
</nav>

反對回復 2018-05-04