html - 为什么需要单击我的元素才能使 CSS 起作用？

Question

必须单击我的元素才能使 CSS 起作用。

我尝试使用 bootstrap 作为导航栏。右上角有 1 个注销链接。 我为此使用了 navbar-nav ml-auto。

之后，我尝试通过添加 margin-right: 50% !important;

来覆盖 bootstrap 的间距

当我刷新页面时，它并没有立即应用。如果我点击链接，它会像我预期的那样“跳”到左边。

这是我尝试过的:

 <nav class="navbar navbar-expand-sm bg-light">
        <!-- Links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Category</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog posts</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Role Management</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">User Management</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">File and Folder Management</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li>
                <a class="nav-item" id="logout-btn" href="#"> Logout </a>
            </li>
        </ul>
    </nav>

CSS:

* {
    /*display: none;*/
    box-sizing: border-box;
}
 #logout-btn.nav-item {
    margin-right: 50% !important;   
}

你能帮我解释一下原因吗，还是我浏览器的问题？ 我觉得很奇怪，已经清除了缓存。

Answer 1

删除您覆盖的 logout-btn.nav-item 的 css 样式。这将应用于 anchor 标记。我们需要为 ul 标签而不是 a 标签添加边距。所以我们有 bootstrap 4 个内置的 margin 类，所以我们可以利用它。因此删除覆盖的样式并将 mr-4 类添加到第二个包含注销链接的 ul 。修改后的代码如下。

 <nav class="navbar navbar-expand-sm bg-light">
        <!-- Links -->
     <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Category</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Blog posts</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Role Management</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">User Management</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">File and Folder Management</a>
        </li>
     </ul>
     <ul class="navbar-nav ml-auto mr-4">
        <li>
            <a class="nav-item" id="logout-btn" href="#"> Logout </a>
        </li>
     </ul>
</nav>