Meine bootstrap navbar kann nicht auf mobile passen

Dies ist meine Seite, die Bootstrap navbar normalen Arbeiten am PC. http://web.ntnu.edu.tw/~60132057A/MyTalk.php Meine bootstrap navbar kann nicht auf mobile passen

Aber nicht passen auf Handy (wie Abb)

mobile view Ich versuche, kaum das Problem zu beheben, aber ich kann nicht navbar fit PC und Handy irgendwann machen.

Wie es zu beheben?

<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>

Quelle

2016-06-21 Kao-Yuan Lin

Ich nehme an, Sie die navbar überläuft auf das Layout bedeuten. Wenn ja, Verwenden navbar-Fest Klasse statt navbar-Festplatte Klasse (<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>

Quelle

2016-06-21 21:21:51

Sie benötigen Objekte Bootstrap-Klassen für jeden Teil der Umsetzung

Beim Bootstrapping ist die gesamte Breite in voller Skalierung 12 Spalten der Breite, und es gibt Klassen, die Ihnen helfen werden, Ihr Objekt zu erstellen cts und page reagieren mit minimalem Aufwand, lesen Sie diese Seite, lesen Sie und haben Sie Geduld :)

http://getbootstrap.com/css/

Quelle

2016-06-21 21:24:28

Ich fixe selbst, füge das hinzu. Aber nicht perfekt.

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

Quelle

2016-06-21 22:43:11

Meine bootstrap navbar kann nicht auf mobile passen

Antwort

Verwandte Themen