Как выровнять элемент навигационной панели вправо?
Я хочу иметь логин и зарегистрироваться справа. Но все, что я пытаюсь, похоже, не работает.
Это то, что я пробовал до сих пор:
<div>во всем<ul>с атрибутом:style="float: right"<div>во всем<ul>с атрибутом:style="text-align: right"- попробовал эти две вещи на
<li>тегах - попробовал все эти вещи снова с
!importantдобавленным до конца - изменился
nav-itemнаnav-rightв<li> - добавил
pull-sm-rightкласс к<li> - добавил
align-content-endкласс к<li>
Это мой код:
<div id="app" class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav " >
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
@yield('content')
</div>
css
twitter-bootstrap
flexbox
bootstrap-4
navbar
Луук Вуйстер
источник
источник
Ответы:
Bootstrap 4 имеет много разных способов выравнивания элементов панели навигации .
float-rightне будет работать, потому что сейчас есть панель навигацииflexbox.Вы можете использовать
mr-autoдля автоматического правого поля на 1-й (слева)navbar-nav. В качестве альтернативы ,ml-autoможет быть использован на 2-й (справа)navbar-nav, или если у вас есть только одинnavbar-nav.https://codeply.com/go/P0G393rzfm
Есть также утилиты flexbox. В этом случае у вас есть 2
navbar-navс, так чтоjustify-content-betweenвnavbar-collapseбудет работать даже пространство между ними,Обновление для Bootstrap 4.0 и новее
Начиная с бета-версии Bootstrap 4,
ml-autoвсе еще будет работать, чтобы подтолкнуть элементы вправо. Просто знайте, чтоnavbar-toggleable-классы изменились наnavbar-expand-*Обновленная навигационная панель справа для Bootstrap 4
Еще один частый сценарий выравнивания по правому краю Bootstrap 4 Navbar включает в себя кнопку справа, которая остается за пределами мобильного коллапса навигации так что она всегда отображается на любой ширине.
Кнопка выравнивания вправо, которая всегда видна
Связанный: Bootstrap NavBar с левыми, центральными или правыми выровненными элементами
источник
mr-autoне работает, если самый правый элемент - этоdropdown. Выпадающие элементы проливаются через правый край страницы.mr-autoв том, как в вопросе о правильном выравнивании, которое работает. Опубликуйте новый вопрос, если у вас есть проблемы с выпадающим списком, но вы, скорее всего, имеете в виду эту проблему: stackoverflow.com/questions/43867258/….dropdown-menu-rightк выровненным по правому краю выпадающим меню на панели навигации. Несоблюдение этого требования может отрезать выпадающий список при определенной ширине.В моем случае я хотел только один набор кнопок / опций навигации и обнаружил, что это будет работать:
Итак, вы добавите
justify-content-endв div и пропуститеmr-autoв списке.Вот рабочий пример .
источник
mr-autoметод используется в документации Bootstrap .mr-autoиспользуется в документах, но не для выравнивания элементов по левому краю. Этот ответ является семантически правильным, как упомянуто в этой статье: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6Для тех, кто все еще борется с этой проблемой в BS4, просто попробуйте следующий код -
источник
m*-autoэтом толкает контент влево или вправо в зависимости от того, где вы положили классml-auto, подталкивает контент в крайнее правое положение, но я просто удивился, почемуmr-0не могу выполнить эту работу?На Bootstrap 4
Если вы хотите выровнять марку слева от вас, а все навигационные элементы - справа, измените значение
mr-autoпо умолчанию наml-autoисточник
На
Bootsrap 4.0.0-beta.2, ни один из ответов, перечисленных здесь, не работал для меня. Наконец, сайт Bootstrap дал мне решение не через документацию, а через исходный код страницы ...Getbootstrap.com выровнять их право
navbar-navвправо с помощью следующего класса:ml-md-auto.источник
Используйте
ml-autoвместоmr-autoпримененияnavjustify-content-end кulисточник
Используйте этот код для перемещения элементов вправо.
источник
Если вы хотите, чтобы «Дом», «Функции» и «Цены» находились слева сразу после вашего
nav-brand, а затем войдите и зарегистрируйтесь справа, оберните два списка<div>и используйте.justify-content-between:источник
Просто добавьте
mr-autoкласс по адресуul:Если у вас есть список меню с обеих сторон, вы можете сделать что-то вроде этого:
источник
используйте класс flex-row-reverse
источник
В boostrap 4 мало что изменилось. Чтобы выровнять панель навигации по правой стороне, нужно сделать всего два изменения. они есть:
navbar-navклассе добавитьw-100какnavbar-nav w-100сделать ширину как 100nav-item dropdownклассе добавитьml-autoкакnav-item dropdown ml-autoсделать поле слева как авто.Если вы не поняли, пожалуйста, обратитесь к изображению, которое я прикрепил к этому.
CodePen Link
Полный исходный код
источник
Для начальной загрузки 4.3.1 я использовал nav-pills, и у меня ничего не получалось, кроме этого:
источник
В bootstrap v4.3 просто добавьте
ml-autoв<ul class="navbar-nav">Ex:<ul class="navbar-nav ml-auto">источник
Я использую Angular 4 (v.4.0.0) и ng-bootstrap (Bootstrap 4). Этот код не все уместен, но надеются, что люди могут выбрать, что работает. Мне потребовалось некоторое время, чтобы найти решение, чтобы мои элементы правильно оправдались, правильно свернулись и применили раскрывающийся список в моем профиле Google (используя OAuth).
источник
Для бета-версии Bootstrap 4 пример навигационной панели с элементами, выровненными по правой стороне:
источник
Использование гибкого поля начальной загрузки помогает нам контролировать размещение и выравнивание вашего элемента навигации. для вышеупомянутой проблемы добавление mr-auto является лучшим решением.
другое размещение может включать
источник
Рабочий пример для БС
v4.0.0-beta.2:источник
Если все вышеперечисленное не помогло, я добавил 100% ширину к классу navbar в CSS. До этого г-н авто не работал для меня над этим проектом с использованием 4.1.
источник
Найдите строку 69 в verndor-prefixes.less и запишите ее следующим образом:
источник
Просто скопировал это с одной из страниц getbootstrap для выпущенной версии 4, которая работала намного лучше, чем выше
источник
Я новичок в переполнении стека и новичок в разработке переднего плана. Это то, что сработало для меня. Поэтому я не хотел отображать элементы списка.
источник