Question

所以我这里有我的（简化的）bootstrap导航栏。

<nav class="navbar">
    <ul class="navbar-nav">
        <li><a href="#">foo</a></li>
    </ul>
</nav>

.navbar-fixed-top {
  height: 100px;
}
.navbar-nav >li >a {
  line-height: 100px
}

我只想在将navbar课程添加到.shrink时缩小nav。非常简单，只需将以下内容添加到我的css中：

.shrink {
    height: 80px;
}

问题是：line-height的{{1}}停留.navbar >li >a - 有没有办法只能用css影响这个？

Answer 1

或许这样的事情？

.navbar {
  height: 100px;
}

.navbar.shrink {
  height: 80px
}

.navbar > .navbar-nav > li > a {
  line-height: 100px
}

.navbar.shrink > .navbar-nav > li > a {
  line-height: 80px
}

Answer 2

你可以尝试：

{{1}}

这会将您想要的样式应用于包含在缩进类的元素中的元素。

如何在同一元素上存在特定类时修改类？

2 个答案: