1
<nav class="navbar navbar-expand-lg">

  <ul class="navbar-nav">
  <li class="nav-item"><a class="nav-link" href="index.html>"Link1</a></li>
  <li class="nav-item active"><a class="nav-link" href="bootstrap.html">Link2</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>  
  <li class="nav-item"><a class="nav-link" href="#">Link4</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link5</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link6</a></li>
 </ul>
</nav>

Как выровнить Link5 и Link6 по правому краю с помощью Bootstrap ? Какой класс нужно прописать?

2
  • 1
    pull-right ?.
    – teran
    22 ноя 2017 в 17:46
  • pull-right почему то не работает, я делал такое же меню на HTML и CSS и просто float: right сделал. А на Bootstrap почему то не хочет. 22 ноя 2017 в 17:53

2 ответа 2

1

Если уж ничего не придумаете, можно вот так:

.navbar-nav {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    list-style-type:none;
    padding:0;
    -webkit-box-pack:start;
        -ms-flex-pack:start;
            justify-content:flex-start;
}
.nav-item {
    margin: 0 5px 0 0;
}
.right { 
   margin-left: auto;  
   margin-top:5px;
}
.nav-item:nth-child(7)  {  
   margin: 5px 0;
}
<nav class="navbar navbar-expand-lg">
  <ul class="navbar-nav">
   <li class="nav-item"><a class="nav-link" href="index.html>"Link1</a></li>
   <li class="nav-item active"><a class="nav-link" href="bootstrap.html">Link2</a></li>
   <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>  
   <li class="nav-item"><a class="nav-link" href="#">Link4</a></li>
   <li class="nav-item right"><a class="nav-link" href="#">Link5</a></li>
   <li class="nav-item right"><a class="nav-link" href="#">Link6</a></li>
 </ul>
</nav>

0

Из 4-ого бутсртапа pull-left/right удален и заменен на флоат. Поэтому, располагая только средствами бутсрапа можете сделать что-то вроде этого(+ у вас в вопросе опечатка, в примере подписала исправила):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg">

  <ul class="navbar-nav w-100 d-block clearfix">
    <li class="nav-item float-left"><a class="nav-link p-2" href="index.html"><!--здесь у вас опечатка - кавычки вылетели за скобки--> Link1</a></li>
    <li class="nav-item float-left active"><a class="nav-link p-2" href="bootstrap.html">Link2</a></li>
    <li class="nav-item float-left"><a class="nav-link p-2" href="#">Link3</a></li>
    <li class="nav-item float-left"><a class="nav-link p-2" href="#">Link4</a></li>

    <li class="nav-item float-right"><a class="nav-link p-2" href="#">Link5</a></li>
    <li class="nav-item float-right"><a class="nav-link p-2" href="#">Link6</a></li>
  </ul>
</nav>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.