如何在移動網絡中心啓動導航欄菜單？

Question

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.navhome { 
 
    padding-right: 50px; 
 
} 
 

 
.navbar { 
 
    text-align: center; 
 

 
} 
 

 
.container-fluid { 
 
    display: inline-block; 
 
}

<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active navhome"><a href="#">Home</a></li> 
 
      <li><a href="#">Menu1</a></li> 
 
      <li><a href="#">Menu2</a></li> 
 
      <li><a href="#">Menu3</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav>

我無法定心引導導航欄。 它在桌面瀏覽器中成功，但導航欄垂直出現在移動瀏覽器中。而移動中的Home按鍵也很陌生。我希望在移動網絡中水平對齊它。 任何幫助，將不勝感激！ mobile page

Answer 1

這是什麼原因造成的問題與調整 - .navhome { padding-right: 50px; }

如果你想保持對大屏幕填充只有你可以添加一個media query。因此，這將確保填充只有屏幕尺寸大於768px。

@media (min-width:768px){ 
    .navhome { 
    padding-right: 50px; 
    } 
} 

工作例如：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
@media (min-width:768px) { 
 
    .navhome { 
 
    padding-right: 50px; 
 
    } 
 
} 
 

 
.navbar { 
 
    text-align: center; 
 
} 
 

 
.container-fluid { 
 
    display: inline-block; 
 
}

<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active navhome"><a href="#">Home</a></li> 
 
     <li><a href="#">Menu1</a></li> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>