Завантажувальний інструмент 4 вирівняйте елементи навбара праворуч


341

Як вирівняти елемент навигації праворуч?

Я хочу мати логін та зареєструватися праворуч. Але все, що я намагаюся, здається, не працює.

Зображення 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>

Navbars побудовані за допомогою флешбоксу з версії альфа 6.
макс

1
Так, так що я повинен зробити, щоб він вирівнявся праворуч. Я вже спробував пару речей флешбоксу без удачі. : /
Luuk Wuijster

Відповіді:


530

У Bootstrap 4 є багато різних способів вирівнювання елементів навбар . float-rightне працюватиме, тому що нинішній панель працює flexbox.

Ви можете використовувати mr-autoдля автоматичного правого поля на 1-му (ліворуч) navbar-nav. Крім того , ви ml-autoможете використовувати його на 2-му (праворуч) navbar-navабо якщо у вас є лише сингл navbar-nav.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <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="#">Pricing</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>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

Також є утиліти flexbox. У цьому випадку у вас є 2 navbar-navс, тому 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вона все ще працюватиме, щоб перемістити елементи вправо. Просто пам’ятайте, що navbar-toggleable-класи змінилися наnavbar-expand-*

Оновлений навігаційний правий для Bootstrap 4


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

Права кнопка вирівнювання, яка завжди видна

введіть тут опис зображення

введіть тут опис зображення


Пов’язані дані: Bootstrap NavBar з елементами вирівнювання вліво, по центру або вправо


1
mr-autoне працює, якщо самим правильним елементом є dropdown. Елементи, що випадають, розливаються по правому краю сторінки.
Еге Ерсос

6
Це працює: codeply.com/go/P0G393rzfm - питання не mr-autoв тому, що питання про вирівнювання права, яке працює. Залиште нове запитання, якщо у вас є проблеми з випадаючим меню, але ви, швидше за все, посилаєтесь на це питання: stackoverflow.com/questions/43867258/…
Zim

2
Ви також можете додати .dropdown-menu-rightдо вирівнювання праворуч спадні меню в панелі навігації. Якщо це не зробити, можна відрізати спадне місце на певних ширинах.
rybo111

@ZimSystem дякую за відповіді. Я слідкую за вашою відповіддю сюди stackoverflow.com/questions/19733447/… . У мене виникає питання, як я можу домогтися, щоб один предмет знаходився з лівого боку, а один - з правого боку?
Локеш Пандей

У codeply.com/go/P0G393rzfm ви показали одну ul зліва та одну ul праворуч. Цього вдалося досягти, додавши mr-auto до першого. Але що робити, якщо у мене є лише одна ul? Я не хочу створювати порожній ul лише для вирівнювання іншого праворуч.
Сантош Кумар

140

У моєму випадку я хотів лише один набір кнопок / параметрів навігації і виявив, що це спрацює:

<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до діва та опустіть mr-autoу списку.

Ось робочий приклад .


3
@numediaweb У прикладі ОП він використовує два елементи в межах nav, вирівнюючи один лівий і один правий; де я використав лише один і вирівняв його праворуч. Це не правильна відповідь, але вона корисна як відповідь на незначну варіацію питання;)
Крейг ван Тондер

Це працює для одного navbar-nav, але mr-autoметод використовується в документах Bootstrap .
Зім

mr-autoвикористовується в документах, але не для вирівнювання елементів ліворуч. Ця відповідь семантично правильна, як згадується у цій статті: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6
qwaz

Питання в тому, чи намагаєтеся ви вирівняти 2 списку посилань або 1. Якщо всього лише 1, ваша відповідь спрацює і мені дуже допомогла. Дякую!
босоніжки

Це працювало на мене, але я не знаю, чому той, хто вище цієї відповіді, не працює.
Сухайл Ахтар

59

Для тих, хто все ще бореться з цією проблемою в BS4, просто спробуйте нижче код -

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

7
Ні - це вирівнює все праворуч. Питання говорить, що він хоче лише вирівняти один елемент праворуч.
NickG

2
Перевірте офіційний документ про те, що m*-autoвін виштовхує вміст вліво або вправо залежно від того, куди ви кладете клас
П'єр де ЛЕСПІНАЙ

@PierredeLESPINAY, так ml-auto, підштовхує вміст до крайньої правої позиції, але я просто задумався, чому mr-0не можна виконати цю роботу?
авокадо

42

На завантажувальному пристрої 4

Якщо ви хочете вирівняти бренд ліворуч, а всі елементи навбара - праворуч, змініть типовий mr-autoнаml-auto

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

32

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

Getbootstrap.com вирівняти їх право navbar-navвправо за допомогою наступного класу: ml-md-auto.


1
Для мене прекрасно працювали. Нічого іншого не зробили.
Марія Кемпбелл

14

Використовуйте ml-autoзамість mr-autoтого, щоб застосувати navвиправдання-content-end доul


9

Використовуйте цей код для переміщення елементів праворуч.

<div class="collapse navbar-collapse justify-content-end">

1
це не спрацює, якщо у вас є меню, що згорнулося, проте, з ml-auto воно все одно буде працювати, тому що коли меню розпадене, елементи <li> все ще займають 100% ширини, тому марж не застосовуватиметься.
Ryan S

8

Якщо ви хочете "Головна", "Функції" та "Ціни зліва" відразу після вашого nav-brand, а потім увійдіть та зареєструйтесь праворуч, потім загорніть два списки <div>та скористайтеся .justify-content-between:

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

7

Просто додайте 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>

5

використовувати клас 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>

2

У boostrap 4. це незначна зміна. Щоб вирівняти навбар у праву сторону, потрібно внести лише дві зміни. вони є:

  1. в navbar-navкласі додати w-100як navbar-nav w-100зробити ширину 100
  2. в nav-item dropdownкласі додати ml-auto, nav-item dropdown ml-autoщоб маржа залишилася як авто.

Якщо ви не зрозуміли, будь ласка, зверніться до зображення, яке я додав до цього.

CodePen Посилання

введіть тут опис зображення

Повний вихідний код

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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 w-100">
      <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="#">Pricing</a>
      </li>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>

2

Для завантажувальної версії 4.3.1 я використовував наві-таблетки, і для мене нічого не вийшло, окрім цього:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>


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>

0

Для бета-версії 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

Використання гнучкого вікна завантажувального пристрою допомагає нам контролювати розміщення та вирівнювання вашого елемента навігації. для вищезгаданої проблеми додавання 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

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

Якщо все вище не вдається, я додав 100% ширини до класу навбар у CSS. До тих пір mr auto не працював для мене над цим проектом, використовуючи 4.1.


-1

Знайдіть рядок 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);
}


-2

Щойно скопіював це з однієї зі сторінок 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>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.