Дело в том, что у меня глючит кнопка, под которую должна скрываться навигация на бутстрапе, она то исчезает, то снова появляется, само меню в нее не сворачивается. Пробовал прописывать
.navbar-toggle { display: block; }
Так она не исчезает в десктопной версии шаблона, прописываю none — вообще не появляется. Ниже весь код навигации и скрины шаблона. Помогите, пожалуйста, совсем недавно начал знакомство с бутстрапом, особых проблем не было, но с кнопкой очень долго туплю уже :(
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- Latest compiled and minified CSS & JS --> <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/bootstrap.min.js"></script> <title>Document</title> </head> <body> <div class="logo"> <img src="images/logo.png" class="img-responsive" class="pull-left" alt="logo"> </div> <div class="navbar navbar-right navbar-default"> <div class="container-fluid"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#responsive-menu"> <span class="sr-only">navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Everything you want hidden at 940px or less, place within here --> <div class="collapse nav-collapse" id="responsive-menu"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contacts</a></li> </ul> </div> </div> </div> </body> </html>
2. Класс nav-collapse заменить на navbar-collapse у элемента:
3. Поменять версию Bootstrap с 3.3.6 на 3.3.7. Только версия 3.3.7 «дружит» с jQuery 3.
Подскажите, пожалуйста, как можно настроить, чтобы и слайдер за страницу не лез и чтобы адаптивность сохранилась?
Основная проблема в вашем макете связана с тем, что вы меню navbar сделали плавающей (float: right) для маленьких экранов (xs). Если вам его необходимо как-то позиционировать её для больших экранов (>xs), то делайте это только для них и не применяйте данные стили для xs.
Т.е. как-то так:
Непонятно зачем вы высоту устанавливаете 100% и также зачем вы используете margin отступы.
float:right прописываю т.к. мне нужно, чтобы меню было строго справа, а так оно в середину уходит или вообще непонятно куда.
А как же без margin-отступов регулировать положение? Насчет ширины и высоты, если поставить фиксированную, то опять-таки сбивается адаптивность и страница тупо не уменьшается, при переходе в мобильную версию
Но float:right можно использовать не только к самому меню, а также к его элементам. Это позволит более точно настроить меню и при этом сохранить его функциональность.
Например, если вам необходимо выровнять пункты меню по правому краю, то float:right можно применить не ко всему меню, а только к:
Тут всё зависит от того, что вы хотите сделать…
В CSS очень много инструментов для позиционирования элементов. Применять то или иной механизм необходимо в зависимости от задачи.