This is my page, the bootstrap navbar normal working on PC. http://web.ntnu.edu.tw/~60132057A/MyTalk.php
But can't fit on mobile(as fig)
mobile view I hardly try to fix the problem, but I can't make navbar fit PC and mobile sometime.
How to fix it?
<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>
Aucun commentaire:
Enregistrer un commentaire