我的bootstrap導航欄不能放在手機上

這是我的頁面，bootstrap導航欄正常工作在PC上。 http://web.ntnu.edu.tw/~60132057A/MyTalk.php 我的bootstrap導航欄不能放在手機上

但不適合在移動設備上（如圖）

mobile view 我幾乎嘗試解決這個問題，但我不能讓導航欄適合PC和移動設備的某個時候。

如何解決？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style> 
 
.div-left{margin:0 auto;text-align:left;width:540px;border:1px solid #FFF;} 
 
</style> 
 
<style scoped> 
 
.container-fluid 
 
{ 
 
    background-color: #78268c; 
 
    font-size: 20px; 
 
    margin: 0 auto; 
 
} 
 

 
.navbar-header > a:link, 
 
.navbar-header > a:visited, 
 
.navbar .navbar-nav > li > a:link, 
 
.navbar .navbar-nav > li > a:visited 
 
{ 
 
    color: #D4D4D4; 
 
} 
 

 
.navbar-header > a:hover, 
 
.navbar-header > a:focus, 
 
.navbar .navbar-nav > li > a:hover, 
 
.navbar .navbar-nav > li > a:focus 
 
{ 
 
    color: #FFFFFF; 
 
    background-color: #561b64; 
 
} 
 
</style>

<!DOCTYPE html> 
 
    <html> 
 
    <body align="center"> 
 
    <br><!--不加上這個br的話，nav上面會有留白，但是原因不清楚--> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 

 
    <nav class="navbar navbar-fixed-top"> 
 
     <!--chrome還不支援style scoped這個語法--> 
 
     <div class="container-fluid"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="/~60132057A/">LKY's space</a></li> 
 
       <li><a href="/~60132057A/">Home</a></li> 
 
       <li><a href="/~60132057A/MyInfo.php">簡歷</a></li> 
 
       <li><a href="/~60132057A/MyProject.php">作品</a></li> 
 
       <li><a href="/~60132057A/MyCourse.php">課程</a></li> 
 
       <li><a href="/~60132057A/MyTalk.php">嘴砲</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    <h4>Fixed Navbar</h4> 
 
    <br> 
 
</body> 
 
</html>

來源

2016-06-21 Kao-Yuan Lin

我想你的意思是在佈局導航欄溢出。如果是這樣，而不是使用導航欄固定頂類（<nav class="navbar navbar-fixed">）導航欄固定類

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style> 
 
.div-left{margin:0 auto;text-align:left;width:540px;border:1px solid #FFF;} 
 
</style> 
 
<style scoped> 
 
.container-fluid 
 
{ 
 
    background-color: #78268c; 
 
    font-size: 20px; 
 
    margin: 0 auto; 
 
} 
 

 
.navbar-header > a:link, 
 
.navbar-header > a:visited, 
 
.navbar .navbar-nav > li > a:link, 
 
.navbar .navbar-nav > li > a:visited 
 
{ 
 
    color: #D4D4D4; 
 
} 
 

 
.navbar-header > a:hover, 
 
.navbar-header > a:focus, 
 
.navbar .navbar-nav > li > a:hover, 
 
.navbar .navbar-nav > li > a:focus 
 
{ 
 
    color: #FFFFFF; 
 
    background-color: #561b64; 
 
} 
 
</style>

<!DOCTYPE html> 
 
    <html> 
 
    <body align="center"> 
 
    <br><!--不加上這個br的話，nav上面會有留白，但是原因不清楚--> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 

 
    <nav class="navbar navbar-fixed"> 
 
     <!--chrome還不支援style scoped這個語法--> 
 
     <div class="container-fluid"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="/~60132057A/">LKY's space</a></li> 
 
       <li><a href="/~60132057A/">Home</a></li> 
 
       <li><a href="/~60132057A/MyInfo.php">簡歷</a></li> 
 
       <li><a href="/~60132057A/MyProject.php">作品</a></li> 
 
       <li><a href="/~60132057A/MyCourse.php">課程</a></li> 
 
       <li><a href="/~60132057A/MyTalk.php">嘴砲</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    <h4>Fixed Navbar</h4> 
 
    <br> 
 
</body> 
 
</html>

來源

2016-06-21 21:21:51

你需要引導實現類爲每個零件

你的對象

自引導時，全尺寸的整個寬度是12列的寬度，並且有些類可以幫助您製作目標cts和頁面以最小的努力作出響應，查看此頁面，閱讀並保持耐心:)

http://getbootstrap.com/css/

來源

2016-06-21 21:24:28

我自己修復，添加此。但不完美。

.navbar-nav li{ 
 
      display: inline-block; 
 
     }

來源

2016-06-21 22:43:11

我的bootstrap導航欄不能放在手機上

回答

相關問題