Проблемы с v4 классов начальной загрузки

Я использую самозагрузки v4, с CDN:Проблемы с 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.

Aim

Чтобы выяснить, почему классы не работают в 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%; 
}

источник

2016-10-21 Patrick McDermott

Bootstrap 4 Документах

Добавлено .float- {хз, см, мкр, Л.Г., х} - {влево, вправо, ни} классы для чувствительных поплавков и удалены .pull-left и .pull-right, поскольку они избыточны .float-xs-left и .float-xs-right.

Утилиты раздела https://v4-alpha.getbootstrap.com/migration/

Таким образом, вы можете использовать float- {Xs, см, д.м.н., Lg, XL} - {влево, вправо, ни один} классов

источник

2016-10-21 10:03:29

Проблемы с v4 классов начальной загрузки

ответ

Смежные вопросы