在菜單上懸停的底部和主動添加邊框

但不明白這一點（笑），並且具有此相反： having

不知道在哪裏調整的東西。

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

 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: black; 
 
    box-shadow: inset 0px -6px 0px #000; 
 
} 
 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    color: black; 
 
    box-shadow: inset 0px -6px 0px #000; 
 
} 
 
#menu { 
 
    height: 140px; 
 
}

<header> 
 
    <nav class="navbar navbar-default" id="menu"> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-md-3 col-sm-3"> 
 
      <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> 
 
      <a class="navbar-brand" href="index.html"> 
 
       <img alt="Brand" src="img/logo.png" height="100px;"> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-9 col-sm-9"> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav "> 
 
       <li class="active"><a href="#">Accueil <span class="sr-only">(current)</span></a></li> 
 
       <li><a href="#">Page 1</a></li> 
 
       <li><a href="#">Page 2</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</header>

你有什麼想法？當我試圖用它增加了導航欄高度的高度解決它......

來源

2016-06-12 ines b.

你能提供一個可重複的演示嗎？ – nicael

你可以提供所有的CSS，所以我們可以幫助 – PhpDude

是的，它會有幫助，我會看到，我也設置了一些邊緣的導航欄（並忘記刪除）。 –

嘗試添加以下代碼：

.navbar-default .navbar-nav > li > a { 
    line-height: 140px; /* = height of #menu */ 
    padding-bottom: 0; 
    padding-top: 0; 
}

檢查結果：

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

 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: black; 
 
    box-shadow: inset 0px -6px 0px #000; 
 

 
} 
 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    color: black; 
 
    box-shadow: inset 0px -6px 0px #000; 
 
} 
 

 
#menu { 
 
    height: 140px; 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    line-height: 140px; /* = height of #menu */ 
 
    padding-bottom: 0; 
 
    padding-top: 0; 
 
}

<header> 
 
    <nav class="navbar navbar-default" id="menu"> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-md-3 col-sm-3"> 
 
      <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> 
 
      <a class="navbar-brand" href="index.html"> 
 
       <img alt="Brand" src="img/logo.png" height="100px;"> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-9 col-sm-9"> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav "> 
 
       <li class="active"><a href="#">Accueil <span class="sr-only">(current)</span></a></li> 
 
       <li><a href="#">Page 1</a></li> 
 
       <li><a href="#">Page 2</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</header>

來源

2016-06-12 12:46:02

謝謝，這對我有用！ –

在菜單上懸停的底部和主動添加邊框

回答

相關問題