css - v4 Bootstrap 类的问题

Question

我正在使用带有 CDN 的 Bootstrap v4:

<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 并且这些类工作正常，但布局当然发生了变化，我更愿意继续使用 v4。我无法漂浮两个 li li 主组右侧的元素元素。

瞄准

找出类在 v4 中不起作用的原因，并 float 这两个 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%;
}

Answer 1

Bootstrap 4 文档:

Added .float-{xs,sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-xs-left and .float-xs-right.

实用程序部分 https://v4-alpha.getbootstrap.com/migration/

所以你可以使用 float-{xs,sm,md,lg,xl}-{left,right,none} 类