Глюк с кнопкой адаптивной навигации на bootstrap 3
5.8K
12
Доброго времени суток!
Дело в том, что у меня глючит кнопка, под которую должна скрываться навигация на бутстрапе, она то исчезает, то снова появляется, само меню в нее не сворачивается. Пробовал прописывать
.navbar-toggle {
display: block;
}Доброго времени суток!
Дело в том, что у меня глючит кнопка, под которую должна скрываться навигация на бутстрапе, она то исчезает, то снова появляется, само меню в нее не сворачивается. Пробовал прописывать:
<code>.navbar-toggle {
display: block;
}
<!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-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; }Основная проблема в вашем макете связана с тем, что вы меню navbar сделали плавающей (float: right) для маленьких экранов (xs). Если вам его необходимо как-то позиционировать её для больших экранов (>xs), то делайте это только для них и не применяйте данные стили для xs.Т.е. как-то так:
@media (min-width:768px) { .navbar{ margin-bottom: 300px; margin-right: 250px; background-color: transparent; border-style: none; float: right; } }Непонятно зачем вы высоту устанавливаете 100% и также зачем вы используете margin отступы.float:right прописываю т.к. мне нужно, чтобы меню было строго справа, а так оно в середину уходит или вообще непонятно куда.
А как же без margin-отступов регулировать положение? Насчет ширины и высоты, если поставить фиксированную, то опять-таки сбивается адаптивность и страница тупо не уменьшается, при переходе в мобильную версию
Но float:right можно использовать не только к самому меню, а также к его элементам. Это позволит более точно настроить меню и при этом сохранить его функциональность.
Например, если вам необходимо выровнять пункты меню по правому краю, то float:right можно применить не ко всему меню, а только к:
Тут всё зависит от того, что вы хотите сделать…
В CSS очень много инструментов для позиционирования элементов. Применять то или иной механизм необходимо в зависимости от задачи.