小さな画面でブートストラップnavbarの奇妙な問題

Question

私のブートストラップnavbarに奇妙な問題があります。私は問題を抱えています。

毎回小さな画面に移動します。これが発生します。他のスタイリングについてユニークなものは何もテキストのフォントやサイズ、その後はありません....

.navbar { 
    font-size: 30px; 
    border: 0; 
    height: 65px; 
} 

.navbar-nav li a:hover, 
.navbar-nav li.active a { 
    color: #e67e22 !important; 
    font-size: 45px !important; 
} 

.navbar-brand { 
    font-size: 40px; 
} 

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="../home.html" style="color:black;"><b>Brandon Nolan</b></a> 

    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 


     <li><a href="#portfolioAnchor" style="color:black;"><b>Bootstrap</b></a></li> 
     <li><a href="#blogAnchor" style="color:black;"><b>Spring</b></a></li> 
     <li><a href="#contactMeAnchor" style="color:black;"><b>Angular</b></a></li> 
     <li><a href="#aboutMeAnchor" id="b1Scroll" style="color:black;"><b>Contact</b></a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Answer 1

それはそれ自体が、画面サイズについてではありません。 navbarのコンテンツは、単にリンクを押し込むために余りにも多くのスペースを占有します - 他にどこに行くのですか？何が起こると思いますか？

ブラウザの開発者ツールを使用してリンクの文字を削除してみてください。十分なスペースがある場合、同じ行に戻るメニュー項目が表示されます。

あなたがすることによってこれを解決することができます：リンクのサイズを変更する

• のでメニューはハンバーガーモードにあるときを除いて常にフィット。
• ハンバーガーメニューが画面の幅を広げて表示されるように変更します。

Answer 2

奇妙なnavbarの問題（または動作）は、ブレークポイントの縮小に依存します。この場合、あなたのニーズに合わせてこのブレークポイントを上書きすることができます：min-width: 768pxのときにnavbarが崩壊し、max-width: 1000pxに変更して問題を解決しました。

@media (max-width: 1000px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .navbar-text { 
     float: none; 
     margin: 15px 0; 
    } 
    /* since 3.1.0 */ 
    .navbar-collapse.collapse.in { 
     display: block!important; 
    } 
    .collapsing { 
     overflow: hidden!important; 
    } 
} 

JSFiddle

Answer 3

は、あなたは、単にすべて一緒にこの問題を回避するために、あなたのリンクのfont-sizeを制御するためのメディアクエリを使用することができます。

@media (max-width: 991px) { 
    .navbar.navbar-default .navbar-nav > li > a { 
    font-size: 20px; 
    } 
} 

またそれがより理にかなっている場合はSO postがブレークポイントを変更するには、このを参照してください。

追記：（navbarはmin-height: 50pxのデフォルトを持っているので、背景色が表示されなくなります）、それは768pxの下に副作用があるので、代わりに高さのあなたのナビゲーションバーを変更するにはパディングを使用することを検討してください。

実例。

.navbar.navbar-default { 
 
    border-color: transparent; 
 
    padding: 15px 0; 
 
} 
 
.navbar.navbar-default .navbar-nav > li > a { 
 
    font-size: 30px; 
 
    color: #000; 
 
    font-weight: bold; 
 
} 
 
.navbar.navbar-default .navbar-nav > li > a:hover, 
 
.navbar.navbar-default .navbar-nav > li.active a { 
 
    color: #e67e22; 
 
} 
 
.navbar.navbar-default .navbar-brand { 
 
    font-size: 40px; 
 
    color: black; 
 
    font-weight: bold; 
 
} 
 
.navbar.navbar-default .navbar-brand:hover { 
 
    color: #e67e22; 
 
} 
 
@media (max-width: 991px) { 
 
    .navbar.navbar-default .navbar-nav > li > a { 
 
    font-size: 20px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="../home.html"><b>Brandon Nolan</b></a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#portfolioAnchor">Bootstrap</a> 
 
     </li> 
 
     <li><a href="#blogAnchor">Spring</a> 
 
     </li> 
 
     <li><a href="#contactMeAnchor">Angular</a> 
 
     </li> 
 
     <li><a href="#aboutMeAnchor" id="b1Scroll">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav>