Question

必须单击我的元素才能使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;   
}

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

Answer 1

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

mr-4

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

1 个答案: