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

169

Как я выравниваю элемент навигации вправо?

Я хочу иметь логин и зарегистрироваться вправо. Но все, что я стараюсь, похоже, не работает.

Изображение 111

Это то, что я пробовал до сих пор:

  • <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>
  • 0
    Navbars построены с flexbox от версии альфы 6.
  • 0
    Да, так что мне нужно сделать, чтобы он выровнялся по правому краю? Я уже попробовал пару вещей flexbox без какой-либо удачи. : /
Теги:
bootstrap-4
flexbox
navbar

18 ответов

323
Лучший ответ

Bootstrap 4 имеет много разных способов выравнивания элементов панели навигации. float-right не будет работать, потому что навигационная панель теперь flexbox.

Вы можете использовать новый mr-auto для автоматического правого поля на первом (левом) navbar-nav. В качестве альтернативы, ml-auto может использоваться на 2-й (правой) navbar-nav или если у вас есть только одна navbar-nav.

<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 mr-auto">
      <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>
</div>

http://www.codeply.com/go/P0G393rzfm

Есть также утилиты flexbox. В этом случае у вас есть 2 navbar-nav s, поэтому justify-content-between navbar-collapse в navbar-collapse сработает ровное пространство между ними,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>


Обновление для Bootstrap 4.0 и новее

Начиная с бета-версии Bootstrap 4, ml-auto будет по-прежнему работать, чтобы перемещать предметы вправо. Просто знайте, что navbar-toggleable- изменились на navbar-expand-*

Обновлена навигационная панель справа для Bootstrap 4


Еще один частый сценарий выравнивания по правому краю Bootstrap 4 Navbar включает в себя кнопку справа, которая остается за пределами навигации мобильного коллапса, так что она всегда отображается на любой ширине.

Кнопка выравнивания вправо, которая всегда видна

Изображение 2361

Изображение 2362


Связанный: Bootstrap NavBar с левыми, центральными или правыми выровненными элементами

  • 0
    mr-auto не работает, если самый правый элемент dropdown . Выпадающие элементы проливаются через правый край страницы.
  • 3
    Это работает: codeply.com/go/P0G393rzfm - проблема не в mr-auto а в вопросе о правильном выравнивании, которое работает. Если у вас есть проблемы с выпадающим списком, опубликуйте новый вопрос, но вы, скорее всего, имеете в виду эту проблему: stackoverflow.com/questions/43867258/…
Показать ещё 2 комментария
95

В моем случае я хотел только один набор кнопок/опций навигации и обнаружил, что это будет работать:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

Итак, вы добавите justify-content-end в div и опустите mr-auto в список.

Вот рабочий рабочий пример.

  • 3
    @numediaweb В примере с OP он использует два элемента внутри nav, выравнивая один левый и один правый; где я использовал только один и выровнял его вправо. Это не правильный ответ, но он полезен как ответ на небольшую вариацию вопроса;)
  • 0
    Это работает для единственной navbar-nav, но в документах Bootstrap используется метод mr-auto .
Показать ещё 3 комментария
26

В Bootsrap 4.0.0-beta.2 ни один из приведенных здесь ответов не работал. Наконец, сайт Bootstrap дал мне решение, а не через его документ, но через его исходный код страницы...

Getbootstrap.com выровняйте их справа navbar-nav вправо с помощью следующего класса: ml-md-auto.

  • 0
    Работал красиво для меня. Больше ничего не делал.
25

Для тех, кто все еще борется с этой проблемой в BS4, просто попробуйте следующий код -

<ul class="navbar-nav ml-auto">
  • 4
    Нет - это все выравнивает направо. В вопросе говорится, что он хочет выровнять только один элемент вправо.
  • 0
    Проверьте официальный документ о m*-auto это толкает контент влево или вправо в зависимости от того, где вы положили класс
18

На Bootstrap 4

Если вы хотите выровнять марку слева и все элементы navbar справа, измените mr-auto по умолчанию на ml-auto

<ul class="navbar-nav ml-auto">
10

Используйте ml-auto вместо mr-auto после применения nav justify-content-end к ul

  • 0
    Это сделало трюк! ☺ Это должно быть помечено как лучший ответ! :-П
4

Если вы хотите "Главная", "Особенности и цена" слева сразу после вашего nav-brand, а затем войдите в систему и зарегистрируйтесь справа, оберните два списка в <div> и используйте .justify-content-between:

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>
3

используйте класс flex-row-reverse

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
          aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>
1

Используйте этот код для перемещения предметов вправо.

div class="collapse navbar-collapse justify-content-end" 
  • 0
    это не будет работать, если у вас есть свернутое Меню, однако с ml-auto оно все равно будет работать, потому что, когда меню свернуто, элементы <li> по-прежнему занимают 100% ширины, поэтому поле не будет применено.
  • 0
    Работает в начальной загрузке 4 ...
1

Просто добавьте класс mr-auto в ul

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

Если у вас есть список меню с обеих сторон, вы можете сделать что-то вроде этого:

<ul class="navbar-nav mr-auto">
            <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="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">left 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">left 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">left disable</a>
            </li>
        </ul>
0

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

0

Рабочий пример для BS v4.0.0-beta.2:

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" 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>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
          <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="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
0

Использование флеш-блока bootstrap помогает мы контролируем размещение и выравнивание вашего навигационного элемента. для проблемы выше добавление mr-auto является лучшим решением для нее.

<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 mr-auto">
      <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>

другое место размещения может включать

fixed- top
    fixed bottom
    sticky-top
0

Найдите строку 69 в verndor-prefixes.less и запишите ее следующим образом:

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
  • 0
    Это даже не код начальной загрузки.
0

Для бета-тестирования Bootstrap 4 образец navbar с элементами, выровненными с правой стороны:

<div id="app" class="container">
  <nav class="navbar navbar-expand-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 mr-auto">
      <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>
</div>
0

Я запускаю Angular 4 (v.4.0.0) и ng-bootstrap (Bootstrap 4). Этот код не все будет релевантным, но надеется, что люди смогут выбрать и выбрать, что работает. Мне потребовалось некоторое время, чтобы найти решение, чтобы мои объекты были оправданы правильно, рушится должным образом и реализовать выпадающее меню из моего профиля Google (используя OAuth).

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <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="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>
-1

Просто скопировал это с одной из страниц getbootstrap для выпущенной версии 4, которая работала намного лучше, чем выше

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div> 
-3

Я новичок в переполнении стека и новой для разработки интерфейса. Это то, что сработало для меня. Поэтому я не хотел отображать элементы списка.

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
  <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="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню