时间戳

首页 > 解决方案 > 为什么需要单击我的元素才能使 CSS 工作？

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

问题描述

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

我尝试将引导程序用于导航栏。右上角有 1 个注销链接。我用navbar-nav ml-auto它。

之后，我尝试通过添加来覆盖引导程序的间距margin-right: 50% !important;

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

这是我尝试过的：

 <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;   
}

你能帮我解释一下为什么，还是我的浏览器的错？我觉得很奇怪，已经清除了缓存。

标签： htmlcssbootstrap-4

解决方案

删除logout-btn.nav-item您覆盖的 css 样式。这将应用于锚标记。我们需要为ul标签添加边距而不是a标签。所以我们有引导 4 个内置边距类，所以我们可以利用它。所以删除覆盖的样式并将类添加到包含注销链接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>

推荐阅读