モバイルウェブでブートストラップナビバーメニューをどのようにすることができますか？

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>

私は、ブートストラップナビゲーションバーを中心にトラブルを抱えています。 デスクトップブラウザでは成功しますが、モバイルブラウザではナビゲーションバーが縦に表示されます。ホームボタンもモバイルでは不思議です。私はそれをモバイルウェブで水平に整列させることを望みます。 ご協力いただければ幸いです！あなただけがmedia queryを追加することができ、大きなスクリーンのためのパディングを維持したい場合は.navhome { padding-right: 50px; }

- mobile page

Answer 1

これは、アライメントの問題を引き起こしているものです。したがって、画面サイズが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>