时间戳

首页 > 解决方案 > 非直接父元素如何影响其非直接子元素？

html - 非直接父元素如何影响其非直接子元素？

问题描述

所以，我是一个新手，使用 bootstrap v5 创建一个带有以下 Html 代码的导航栏。在这里，我的链接项的直接父项（ul）有一个“navbar-nav”类，它将我的链接项样式化为彼此堆叠的堆栈。然后非直接类“navbar-expand-lg”将我的项目设置为彼此相邻。现在我对这个非立即类如何影响我的项目以及引导 CSS 文件中提到的属性感到困惑。

<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav ">
    <li class="nav-item">
        <a class="nav-link" href="">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="">Services</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
    </li>
</ul>

标签： htmlcssbootstrap-5css-specificity

解决方案

这是CSS 选择器和特异性的简单问题......

Bootstrap 有更具体的 CSS 用于.navbar-expand-lg将内部navbar-nav更改为flex-direction: row. 这会覆盖flex-direction: columnfrom .navbar-nav。

从 Bootstrap 5 CSS...

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

演示

推荐阅读