如何在进出或响应视图时更改 Bootstrap3 导航中的 CSS li 标记

Question

我想更改父 （li a） 标签的 bootstrap3 导航高度，但在两种情况下（桌面和移动）。在桌面模式下，父 li 标签非常高，但在移动模式下，li 标签需要为正常高度。

它应该做什么：我想要什么

它在做什么：不工作示例

这是我正在使用的 CSS

/*-- targeted li a tag  --*/
.nav > li > a { padding: 50px 20px 20px 20px; }
/*-- visual --*/
.navbar-nav > li > a { font-weight: bold; color: #868686; text-transform: uppercase; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #373D39; color: #fff; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: #373D39; color: #fff; }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #373D39; color: #fff; }

这是我尝试过的 CSS - 我只需要在移动模式下定位 （li a） 的这一领域的帮助

/*-- I am trying to target the menu in mobile mode (collapsed) but if I do this it changes the desktop mode as well   --*/
.navbar-default .navbar-collapse li a, .navbar-default .navbar-collapse .navbar-nav > li a { padding: 0px 20px 0px 20px }

这是我的演示 HTML

<nav class="navbar navbar-default " role="navigation">
<div class="hidden-sm hidden-md hidden-lg navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <<!--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= "#">Menu</a>
</div>
<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav text-left">
        <li class=" active"><a href="#">Home</a></li>
        <li class=" dropdown "><a href="#" id="drop1"  data-toggle="dropdown" class="dropdown-toggle" role="button" >About <b class="caret"></b></a>
            <ul  role="menu" class="dropdown-menu"  aria-labelledby="drop1">
                <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Overview</a></li>
                <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Team Bios</a></li>
                <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Customers</a></li>
                <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Careers</a></li>
            </ul>
        </li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
    </ul>   
</div>

Answer 1

您可以将自定义导航 CSS 包装在媒体查询中。

@media (min-width: 768px) {
/*-- targeted li a tag  --*/
.nav > li > a { padding: 50px 20px 20px 20px; }
/*-- visual --*/
.navbar-nav > li > a { font-weight: bold; color: #868686; text-transform: uppercase; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #373D39; color: #fff; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: #373D39; color: #fff; }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #373D39; color: #fff; }
}

这样只有默认的（正常的 li 高度）才会出现在移动设备上。

工作演示：http://bootply.com/92228

附言 - 如果您只想在移动设备上保留自定义颜色/背景，则可以将自定义li > a填充包装在@media查询中。

@media (min-width: 768px) {
  /*-- targeted li a tag  --*/
  .nav > li > a { padding: 50px 20px 20px 20px; }
}