Как в bootstrap убрать адаптивность?

380

10 декабря 2016, 10:43

Доверстываю шаблон, нужно чтобы меню при любом, даже самом малом разрешении, оставалось неизменной

А сейчас она на мелких экранах просто исчезает, как убрать этот эффект?

    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <a class="navbar-brand" href="index.html">Myevent</a>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">События</a></li>
                        <li><a href="groups.html">Группы</a></li>
                        <li><a href="feed.html">Лента</a></li>
                        <li><a href="notifications.html">Оповещения</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                                <img src="images/german.png">
                                Герман <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Профиль</a></li>
                                <li><a href="#">Выход</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

Answer 1

Должен помочь следующий набор стилей стилей, чтобы перебить стандартный набор правил для меню Bootstrap:

.navbar-collapse.collapse {           // отключение скрытия меню на мелких экранах
  display: block!important;
}
.navbar-nav>li, .navbar-nav {         // выравнивание правостороннего меню по левой стороне
  float: left !important;
}
.navbar-nav.navbar-right:last-child { // присутствует для больших экранов
  margin-right: -15px !important;     // следует добавить для мобильных
}
.navbar-right {                       // выравнивает пункты в правостороннем меню
  float: right!important;             // по одной линии с левосторонними пунктами
}

возможно, будет работать и без !important в свойствах
в случае использования библиотеки не через CDN, можно в кастомайзере перенастроить брейкпоинты и переменные для мелких разрешений.

Ответ взят на SO.com