Блог

Главная - Вопросы по программированию - Поле выпадающего меню начальной загрузки

Поле выпадающего меню начальной загрузки

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

У меня проблема с CSS моего выпадающего меню Bootstrap для моего веб-приложения. На мой вкус, оно слишком далеко от правого края страницы, и я бы просто хотел, чтобы оно было немного сдвинуто влево. Я попытался оформить меню с помощью margin-right, чтобы убрать его с края экрана, но по-прежнему безуспешно, хотя, если я сделаю то же самое с margin-left, это переместит меню еще дальше от правого края экрана. Мне нужна помощь с CSS по этому вопросу. Ниже показано, как выглядит меню:

оригинал

Я просто присвоил раскрывающемуся списку идентификатор «DropDownMenu», и он применяется к правильному элементу HTML, но поле справа просто не работает. Вот прилагаемый HTML:

 <ul class="navbar-nav ml-auto">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            More <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" id="dropdownMenu">
            <li class="nav-item">
                <a class="nav-link" href="${contextRoot}/profile">
                    Account
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:$('#logoutForm').submit();">
                    Sign Out
                 </a>
            </li>
            <sec:authorize access="hasRole('ROLE_ADMIN')">
                <li class="nav-item">
                    <a class="nav-link" href="${contextRoot}/register">
                        Register
                    </a>
                </li>
            </sec:authorize>
        </ul>
    </li>
</ul>
  
 #dropdownMenu {
    margin-right: 2% !important;
    position: relative;
}

Комментарии:

1. вы пытались установить position: relative для стиля компонента?

2. Я только что попробовал это. Это позволяет мне перемещать меню, но оно также перемещает само слово «Больше». Я вставил приведенный выше HTML, а также CSS, который я добавил.

3. проверьте плавающий элемент, чтобы получить более подробную информацию и применить изменения стиля к этому конкретному контейнеру

4. можно ли увидеть URL-адрес, по которому вы применили это меню начальной загрузки?

5. Я опубликовал свое решение.

Ответ №1:

Вы можете попробовать, например margin-right: 20px !important . !important будет применено поле справа к вашему элементу, потому что оно переопределит старое значение.

Комментарии:

1. Вы пробовали применять класс mr начальной загрузки. Пример: mr-3

2. Я опубликовал свое окончательное решение выше.

Ответ №2:

Исходный CSS для класса выпадающего меню Bootstrap имеет свойство left:0. Я изменил это, и осталось окончательное расположение, которое мне понравилось:-10 пикселей; Вы видите на изображении, что меню больше не находится на краю. решение