it-roy-ru.com

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

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

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

 Picture of Navbar

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

  • <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>
204
Luuk Wuijster

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

Вы можете использовать новый mr-auto для автоматического правого поля на 1st (left) navbar-nav. В качестве альтернативы, ml-auto можно использовать для 2nd (справа) 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-navs, поэтому justify-content-between в 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 по-прежнему будет работать с Push-элементами вправо. Просто знайте, что классы navbar-toggleable- изменились на navbar-expand-*

Обновлено Навбар справа для Bootstrap 4


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

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

 enter image description here

 enter image description here


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

341
Zim

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

<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 в списке.

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

99
Craig van Tonder

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

<ul class="navbar-nav ml-auto">
29
Muhammad Tarique

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

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

25
ClemC

На Bootstrap 4

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

<ul class="navbar-nav ml-auto">
20
geet Sebastian

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

11
James Pike

Если вы хотите, чтобы «Дом», «Функции» и «Цены» были слева сразу после вашего nav-brand, а затем войдите и зарегистрируйтесь справа, оберните два списка в <div> и используйте .justify-content-between:

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>
4
J Kennedy

используйте класс 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>
3
mubsher

Просто добавьте класс MR-Auto на ул.

<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>
2
SKL

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

div class="collapse navbar-collapse justify-content-end" 
2
Maijied Hasan Shuvo

Рабочий пример для 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
belgoros

Я использую 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>
0
GrettyGoose

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

<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
Kaczor

Использование flex-коробки bootstrap помогает Us контролировать размещение и выравнивание вашего элемента навигации . Для решения проблемы, указанной выше, добавление 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
maro

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

0
Dominic Davies