悬停背景不以 Bootstrap 中的项目为中心 3

Question

我尝试修改导航栏上的悬停效果，但没有成功。我的想法是在我悬停 link（垂直居中）时显示一个小矩形。矩形应该小于导航栏的总高度。

现在，悬停时出现奇怪的效果 link 并且下拉菜单不再起作用

我创建了一个 bootply 我的问题

Answer 1

这里，您需要在<a>标签中添加<span>标签。此外，需要在 css.

中进行一些修改

HTML

<div 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=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="/"><span>Home</span></a></li>
                  <li><a href="/"><span>About</span></a></li>
                  <li><a href="/"><span>Contact</span></a></li>

                  <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>Dropdown <b class="caret"></b></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                    </ul>
                </li>
              </ul>
           </div>
        </div>
    </div>

CSS

.navbar-default {
    background-color: #FFFFFF;
}

ul.nav > li > a span
{ 
  height: 28px;
  display: inline-block;
  line-height: 28px;
  padding-right:15px; padding-left:15px;
}
ul.nav > li > a:hover span
{ 
  background-color: #f0f0f0 !important; 
  border-radius: 6px !important;
}
ul.nav > li > a{padding-right:0px; padding-left:0px;}

另外，检查一下bootply

Answer 2

您必须为您的 ul.nav

更改如下所示的高度

ul.nav > li > a:hover
{ 
     background-color: #f0f0f0 !important; 
     border-radius: 6px !important;
     height: 35px;//Change according to your wish
     margin-top:5px;//You can add this too
}

点这里Bootply

悬停背景不以 Bootstrap 中的项目为中心 3

Hover background not centered on items in Bootstrap 3

html

css

navbar

twitter-bootstrap-3