ブートストラップ4 navbar - モバイルでの高さなし

Question

すべてのビューポートのブートストラップ4 navbarの高さを80pxに設定するにはどうすればよいですか？

".navbar"で "min-height：80px"を試しましたが、navbarが壊れています。

SASSコード：

$navbar-bg:    #26f3fd; 
$navbar-height:   80px; 

.navbar { 
    background-color: $navbar-bg; 
    min-height: $navbar-height; 
} 

htmlコード：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="main-navbar" data-toggle="sticky-onscroll"> 
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse justify-content-md-center" id="navbar-content"> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="<?= esc_url(home_url('/')); ?>">Accueil</a> 
     </li> 
    </ul> 
</div> 

http://codepen.io/juavenel/pen/xqMPrQ/

Answer 1

あなたのナビゲーションバーがnavbar-brandので、それは高さですが含まれていないため、問題がありますnavbarが垂直に積み重なると折りたたまれます。

これはベータリリースで修正される予定既知の問題です：https://github.com/twbs/bootstrap/pull/22230

回避策は空placeholdのナビゲーションバー、テキストを含めるか、ナビゲーションバーブランドをする..です

<nav class="navbar navbar-toggleable-md navbar-light bg-faded py-3" id="main-navbar"> 
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <span class="navbar-text">&nbsp;</span> 
    <div class="collapse navbar-collapse justify-content-md-center" id="navbar-content"> 
     <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Accueil</a> 
     </li> 
     </ul> 
    </div> 
</nav> 

http://www.codeply.com/go/FIKesgfDhL

また、垂直パディング（py-3）を使用して、ナビゲーションバーの高さを上げ、項目を垂直に中央に置くことができます。