v4 的问题 bootstrap 类

Question

我正在使用 bootstrap v4，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>

问题

某些 class 无法正常工作，例如 pull-right 或 navbar-right。我恢复使用旧版本的 Bootstrap 并且 classes 工作，但布局当然改变了，我更愿意继续使用 v4。我无法将两个 li 元素浮动到主要 li 元素组的右侧。

瞄准

找出为什么 classes 在 v4 中不起作用，并将两个 li 项目 login 和 register 浮动到右侧主导航，使用 class 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} 类

v4 的问题 bootstrap 类

Issues with v4 bootstrap classes

css

twitter-bootstrap

bootstrap-4