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 that you have read and understand our privacy policy and code of conduct.

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