My bootstrap navbar не может поместиться на мобильном телефоне

Это моя страница, загрузочный навигатор обычный, работающий на ПК. http://web.ntnu.edu.tw/~60132057A/MyTalk.php My bootstrap navbar не может поместиться на мобильном телефоне

Но не может поместиться на мобильном телефоне (как рис)

mobile view Я с трудом пытаюсь решить эту проблему, но я не могу сделать NavBar подходят ПК и мобильные устройства некоторого времени.

Как это исправить?

<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

Я полагаю, вы имеете в виду NavBar переполнении на макете. Если да, то используйте NavBar фиксированных класса вместо Navbar фиксированных верхних класса (<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 столбцов ширины, и есть классы, которые помогут вам сделать ваше обследование каратов и страница будет реагировать с минимальными усилиями, проверить эту страницу, читайте и будьте терпеливы :)

http://getbootstrap.com/css/

источник

2016-06-21 21:24:28

исправить сам, добавьте это. Но не идеально.

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

источник

2016-06-21 22:43:11

My bootstrap navbar не может поместиться на мобильном телефоне

ответ

Смежные вопросы