v4 引导类的问题答案

【问题标题】：Issues with v4 bootstrap classesv4 引导类的问题
【发布时间】：2016-10-21 18:07:19
【问题描述】：

我正在使用带有 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 中不起作用的原因，并使用类 navbar-right 将两个 li 项目 login 和 register 浮动到主导航的右侧。

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%;
}

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

引导 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} 类

【讨论】：