アクティブクラスのブートストラップを作成するには、navbarに全高がありますか？

Question

/* Navigation Setup */ 
 
.navbar { 
 
    margin: 0; 
 
    border: 0; 
 
    border-radius: 0; 
 
} 
 
#navigation{ 
 
\t background-color: #203260; 
 
} 
 
#navigation .navbar-default { 
 
\t background-color: #203260; 
 
} 
 
#navigation .navbar-default .navbar-nav>li>a { 
 
\t color: #fff; 
 
\t font-size: 20px; 
 
} 
 
#navigation .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{ 
 
    background-color: #065690; 
 
} 
 
#navigation .navbar-default .navbar-nav>li>a { 
 
\t margin-top: 15px; 
 
} 
 
#navigation .nav .navbar-nav .navbar-right { 
 
\t margin-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section id="navigation"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button>   
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Information</a></li> 
 
      <li><a href="#">Contact Info</a></li>  
 
      </ul>   
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Call Us Today! <br> (123) 456-789</a></li>    
 
      </ul> 
 
     </div><!-- /.navbar-collapse --> 
 
     </div><!-- /.container-fluid --> 
 
    </nav> 
 
    </div> 
 
    </div> 
 
    </section>

フルスクリーンでの出力を参照してください。 アクティブなクラスが完全な高さを持つ必要があります。 例ホームはアクティブなクラスなので、上と下には薄い青色しか表示されません。しかし、私はそれの周りに薄い青の色とテキストの上下に濃い青色だけを見ます。

何か

のようにありがとう！

Answer 1

aタグでline-heightルールを使用して解決できます。

#navigation .navbar .navbar-nav > li > a { 
    line-height: 50px; 
} 

実施例：

#navigation { 
 
    background-color: #203260; 
 
} 
 
#navigation .navbar { 
 
    margin: 0; 
 
    border: 0; 
 
    border-radius: 0; 
 
    background-color: #203260; 
 
} 
 
#navigation .navbar .navbar-nav > li > a { 
 
    color: #fff; 
 
    font-size: 20px; 
 
} 
 
#navigation .navbar .navbar-nav > .active > a, 
 
#navigation .navbar .navbar-nav > .active > a:focus, 
 
#navigation .navbar .navbar-nav > .active > a:hover { 
 
    background-color: #065690; 
 
} 
 
#navigation .navbar .navbar-nav.navbar-right > li > a > div { 
 
    display: inline-block; 
 
} 
 
@media (min-width: 768px) { 
 
    #navigation .navbar .navbar-nav > li > a { 
 
    line-height: 50px; 
 
    } 
 
    #navigation .navbar .navbar-nav.navbar-right > li > a { 
 
    font-size: 20px; 
 
    line-height: 25px; 
 
    } 
 
    #navigation .navbar .navbar-nav.navbar-right > li > a > div { 
 
    display: block; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="navigation"> 
 
    <div class="container"> 
 
    <div class="row"> 
 

 
     <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 

 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      </div> 
 

 
      <div class="collapse navbar-collapse" id="navbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li><a href="#">Services</a> 
 
       </li> 
 
       <li><a href="#">Information</a> 
 
       </li> 
 
       <li><a href="#">Contact Info</a> 
 
       </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="active"><a href="#">Call Us Today! @ <div>(123) 456-789</div></a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 

 
     </div> 
 
     </nav> 
 

 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>