Bootstrap 4 не используйте меню гамбургер и не разрушаться нав

Используя этот HTML:Bootstrap 4 не используйте меню гамбургер и не разрушаться нав

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <title>app</title> 
    <meta name="description" content="todoApp"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse fixed-top"> 
     <a class="navbar-brand" href="#">App</a> 
     <ul class="nav navbar-nav"> 
      <li class="nav-item"> 
      <a href="#" class="nav-link"> 
       home 
      </a> 
      </li> 
      <li class="nav-item"> 
      <a href="#" class="nav-link"> 
       about 
      </a> 
      </li> 
      <li class="nav-item"> 
      <a href="#" class="nav-link"> 
       admin 
      </a> 
      </li> 
     </ul> 
     </nav> 
    </div> 
    </body> 
</html>

Навигационное меню выглядит хорошо, когда окно браузера шире, чем 760px:

Однако , когда окно имеет ширину менее 760 пикселей, меню перепрыгивает вниз:

Каков правильный синтаксис для сохранения меню как есть, независимо от ширины окна. Кроме того, я не хочу помещать ссылки меню за кнопкой гамбургера, когда окно сокращается.

Спасибо!

источник

2017-02-02 SeanPlusPlus

-1

Я бы попытался использовать Firebug для проверки позиции, там есть точка останова, которая вызывает изменение. Стиль CSS, вероятно, завернутые в правиле @media похожее на это:

@media screen and (max-width: 760px) { 
    ul.navbar-nav li.nav-item{display: block;} 
}

Не стесняйтесь размещать CSS, связанные с .nav-элемент, если это не помогает.

источник

2017-02-03 00:11:05

Bootstrap4 предназначен для мобильных устройств с гибким интерфейсом.

При запуске flex-direction: column; включен, но когда вы идете на 992px он стал flex-direction: row;

, что вы после этого.

Файл СКС здесь https://github.com/twbs/bootstrap/blob/v4-dev/scss/_navbar.scss линии 127 до 181.

Вы можете попытаться прокомментировать строки 147 & 178 и проверить, если эту работу.

источник

2017-02-03 00:43:04 EikiProg

Bootstrap 4 не используйте меню гамбургер и не разрушаться нав

ответ

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