Блог

Я использую bootstrap версии 4 с CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm JWlgKa0M0kGRpJbF2J8q qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

Проблема

Некоторые классы не работают, такие как pull-right или navbar-right . Я вернулся к использованию более старой версии Bootstrap, и классы работали, но макет, конечно, изменился, и я бы предпочел продолжать использовать версию 4. Я не могу разместить два li элемента справа от основной группы li элементов.

Цель

Чтобы выяснить, почему классы не работают в версии 4, и переместить два li элемента, login и register , вправо в главном навигаторе, используя класс navbar-right

HTML

 <nav class="navbar bg--lighter-blue">
    <div class="header-container">
        <div class="col-md-12">
            <ul class="nav navbar-nav pull-md-right">
                <li class="nav-item active"><a class="nav-link txt--white text-uppercase" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">Benefits</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">How it works</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">Subscribe</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">FAQ</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">Contact</a></li>    
            </ul>
            <ul class="nav navbar-nav">
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="subpages/login.html">Login</a></li>
                <li class="nav-item"><a class="nav-link txt--white text-uppercase" href="#">Register</a></li>   
            </ul>                                   
        </div>      
    </div>                  
</nav>
  

CSS

 .header-container { 
 margin-left: auto;
 margin-right: auto;
 padding-left: 15px;
 padding-right: 15px;   
 width: 90%;
}
  

Документы Bootstrap 4:

Добавлены классы .float-{xs, sm, md, lg, xl}-{left, right, none} для адаптивных поплавков и удалены .pull-left и .pull-right, поскольку они избыточны для .float-xs-left и .float-xs-right.

Раздел утилит https://v4-alpha.getbootstrap.com/migration /

Таким образом, вы можете использовать классы float-{xs, sm, md, lg, xl}-{left, right, none}