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>

问题

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

目标

要找出为什么类在v4中不起作用，并将两个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 docs：

为响应浮动添加了.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}类

v4引导类的问题

1 个答案: