我的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导航栏不能放在手机上

回答

相关问题