Плавающие элементы навигации справа в Bootstrap 4?

Как вы нажимаете на правильные элементы навигации на панели навигации Bootstrap 4? Я пробовал float-*-right, но не работал.

  <nav class="navbar navbar-static-top navbar-dark bg-inverse float-*-right">
  <a class="navbar-brand" href="#">Project name</a>
  <ul class="nav 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="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>

Мне нужно выровнять элементы навигации вправо.


html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4
person PythonAnywhere    schedule 17.12.2016    source источник
comment
Немного кода было бы здорово, чтобы мы могли увидеть реальную проблему   -  person Ason    schedule 18.12.2016
comment
Вам нужен класс pull-right: bootply.com/VljzqtNw5S (если такой класс существует в версии 4 ).   -  person sinisake    schedule 18.12.2016
comment
Ни float-right, ни pull-right не работают, потому что Bootstrap 4 теперь использует flexbox. Теперь ml-auto используется для перемещения элементов навигации вправо   -  person Zim    schedule 15.02.2018

Ответы (2)


arrow_upward
3
arrow_downward

Добавьте класс 'float-xs-right' в ul

<ul class="nav navbar-nav float-xs-right">

Вы можете удалить «float-*-right» из содержащего тега навигации, так как он там ничего не делает.

http://www.bootply.com/OnvcimHYD7

person toast    schedule 18.12.2016

arrow_upward
0
arrow_downward

Обновление 2018

float-right больше не будет работать, потому что панель навигации Bootstrap 4 использует flexbox. Вместо этого следует использовать класс автоматической маржи (то есть: ml-auto).

См.: Bootstrap 4 выравнивает элементы панели навигации по правому краю

person Zim    schedule 09.05.2018