Почему для работы CSS нужно щелкнуть по моему элементу?

Question

Для работы CSS нужно щелкнуть по моему элементу.

Я попытался использовать bootstrap для навигационной панели.С 1 logout ссылкой в ​​правом верхнем углу.Я использовал 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

Удалить стиль CSS для logout-btn.nav-item, который вы переопределяете.это применяется к тегу привязки.нам нужно добавить поле к тегу 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>