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

Как выровнять элемент navbar вправо?



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



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>
802   18  

18 ответов:

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

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

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

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

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

enter image description here

enter image description here

по теме: начальной загрузки navbar с левой, центральной или правой элементы выровнены

266  
2018-08-15 16:04:28

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

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

здесь пример работающего.

92  
2017-01-08 03:49:36

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

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

22  
2017-12-12 01:39:25

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

<ul class="navbar-nav ml-auto">
18  
2018-01-20 13:29:31

На Bootstrap 4

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

<ul class="navbar-nav ml-auto">
10  
2018-04-03 05:15:43

использовать ml-auto вместо mr-auto после применения nav оправдать-содержание-конец ul

7  
2017-11-13 19:50:29

используйте класс 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  
2017-10-30 19:25:58

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

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>
2  
2017-08-01 09:22:50

просто добавьте класс 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>
1  
2017-07-24 18:53:12

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

div class="collapse navbar-collapse justify-content-end"
1  
2018-03-02 06:33:41

Я бегу угловые 4 (в. 4.0.0) и НГ-загрузчик (загрузчик 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  
2017-08-11 03:50:20

для Bootstrap 4 beta пример 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  
2017-08-20 00:31:12

использование bootstrap flex box помогает мы контролируем размещение и выравнивание вашего навигационного элемента. для проблемы выше добавление 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  
2017-10-23 12:06:48

рабочий пример для 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  
2017-11-14 11:44:47

найдите строку 69 в префиксах верндора.меньше и напишите его следующим образом:

.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  
2018-01-10 06:08:58

просто скопировал это с одной из страниц 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>
0  
2018-02-12 13:57:32

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

0  
2018-05-19 23:52:39

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

.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>
-2  
2017-04-03 14:57:44

Comments

    Ничего не найдено.
Click here to cancel reply.