Вопрос по html, css, bootstrap-4 – Bootstrap 4 - Перемещение ссылок справа от панели навигации с помощью кнопки переключения [дубликаты]

9

На этот вопрос уже есть ответ:

Bootstrap 4 выравнивает элементы панели навигации вправо 18 ответов

Я пытался переместить ссылки с левой стороны навигационной панели на правую сторону, и это не позволило мне. Я попытался сместить его вправо, и ничего не произошло, то же самое с позиции: относительный; справа: 200 пикселей; и padding-right: -200px ;. Если у кого-то есть какие-либо другие предложения, мы будем благодарны.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>

    <a class="navbar-brand" href="index.html">

        <img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt="">

    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav mr-auto">

            <li class="nav-item">
                <a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="services.html">Services</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="portfolio.html">Portfolio</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="about.html">About</a>
            </li>

        </ul>

    </div>
</nav>

Ваш Ответ

4   ответа
0

Используемыйjustify-content: end; чтобы начать контент для конца

.mr-auto {
    margin-right: 0 !important;
}
.navbar-toggleable-md .navbar-collapse {         
    -webkit-justify-content: flex-end;
    justify-content: flex-end;  
} 

Вот код скрипки:https: //jsfiddle.net/0ewenvcb/2

Обновил мой код и скрипку Mukesh Ram
Imgur.com / nCwNwGi в Chrome OSX версии 55.0.2883.95 (64-разрядная версия) ссылки выравниваются по левому краю в ссылке на скрипку в вашем ответе Jsfiddle.net / 0ewenvcb / 1) haxxxton
Это не похоже на работу .. ссылки все еще слева: haxxxton
на скрипке это работает .. Mukesh Ram
1

ремещался вправо в Bootstrap 4.1.
Я попробовал следующую работу:
Под@media (max-width:575px) - добавил.navbar-header {width:100%;} и в классе.menu-icon (Я назвал это значком меню){justify-content:end;}.
Это переместило обаnavbar-brand а такжеmenu-icon направо. Чтобы переместитьnavbar-brand слева, в HTML добавлен классmr-auto вnavbar-brand. Это сработало для меня.

0

я добавил 100% ширину к классу navbar в CSS. До этого mr-auto не работал для меня в этом проекте с использованием Bootstrap 4.1.

21

.mr-auto так что у тебя естьmargin-right: auto !important и навигационные элементы выровнены влево.
Если ты изменишь класс на.ml-auto у тебя естьmargin-left: auto !important и ваши навигационные элементы выровнены по правому краю

Подтверждено в jsfiddle: Jsfiddle.net / sayLz41a haxxxton
Модифицированный jsfiddle Jsfiddle.net / sayLz41a / 1 (с черным текстом на белой панели навигации вместо белого текста на белой панели навигации) Julian Stark
Огромное спасибо! :) Cameron Foster
Самый простой, самый показательный ответ, который я когда-либо видел. Спасибо @ DestinatioN Tes3awy

Похожие вопросы