Bootstrap mobile navbar не работает

113
14

Я работаю над мобильным навигатором, построенным на бутстрапе.

Вот моя разметка

    <nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" class="img-responsive" /></a>
</div>
<div class="collapse navbar-collapse" id="collapse-1">
<ul class="nav navbar-nav navbar-right" role="navigation" >
<li class="active"><a href="">blah</a></li>
<li><a href="">blah</a></li>
<li><a href="">blah</a></li>
<li><a href="">blah</a></li>
<li><a href="">blahs</a></li>
<li><a href="">blags</a></li>
<li><a href="" style="padding-right:0;">Contact</a></li>
</ul>
</div>
</div>
</nav>

вот мой файл css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Montserrat:400,700);
/* index.html (mobile)*/
@media only screen and (max-width: 768px) {
/* * {
border: 1px dashed red;
}*/

}

body {
font-family:'Open Sans';
color:#7f7f7f;
font-size:14px;
line-height:1.7;
}

p { margin-bottom: 13px; }
hr { border-top: 1px solid #D0D0D0; }
.no-padding { padding:0; }
.no-margin { margin:0; }
.mt40 { margin-top:40px; }
.mb40 { margin-bottom:40px; }
.mt60 { margin-top:60px; }
.mb60 { margin-bottom:60px; }
.mt50 { margin-top:50px; }
.mb45 { margin-bottom:45px; }
.pt60 { padding-top:60px; }
.pb60 { padding-bottom:60px; }
.pb50 { padding-bottom:50px; }
.pt50 { padding-top:50px; }
.pb45 { padding-bottom:45px; }
.bg-white { background-color:#fff; }
.bg-grey { background-color:#EAEAEA; }

.navbar {
font-family:'Montserrat';
font-size:12px;
text-transform:uppercase;
background-color:#fff;
height:80px;
box-shadow: 0 4px 0 -2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 4px 0 -2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0 4px 0 -2px rgba(0, 0, 0, 0.05);
margin-bottom:0;
}
.navbar-brand {

height:79px;
padding:27px 15px;
}

.navbar-nav>li>a {
line-height:50px;
color:#a1a1a1;
}
#bg-boxed {
background-image: url(../images/pattern.png);
background-repeat: repeat;
height: 100%;
}
.boxed {
background-color: #fff;
max-width: 1250px;
margin: 0 auto !important;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 0 2px rgba(255,255,255,.21);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 0 2px rgba(255,255,255,.21);
box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 0 2px rgba(255,255,255,.21);
height: 100%;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color:transparent;
color:#0087ff;
}
.nav>li .active {
color:#0087ff;
}
.hero-home { background:url(../images/hero-bg.jpg); height:300px; background-size:cover; border-right:1px solid #595959; border-left:1px solid #595959;}
.hero-description { color:#fff; }
.hero-home h1 { color:#fff; font-family:'Open Sans'; font-size:24px; font-weight:300; font-size:36px; margin:0; }

.vcenter {
position:relative;
top:50%;
transform:translateY(-50%);
}

.btn-hero {
color:#FFF;
background-color:#0087ff;
padding:14px 28px;
border:0;
border-radius:25px;
}
.btn-hero2 {
color:#FFF;
background-color:#1B94FF;
padding:14px 28px;
border:0;
border-radius:25px;
}
.btn-hero.active, .btn-hero.focus, .btn-hero:active, .btn-hero:focus, .btn-hero:hover, .open>.dropdown-toggle.btn-hero {
color:#fff;
background-color:#097CE2;
}
.btn-hero2.active, .btn-hero2.focus, .btn-hero2:active, .btn-hero2:focus, .btn-hero2:hover, .open>.dropdown-toggle.btn-hero2 {
color: #fff;
background-color:#197ED8;
}

#owl-demo .item{
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}

.owl-theme .owl-controls .owl-nav [class*=owl-] {
color: #fff;
font-size: 14px;
margin: 0 5px 0 0;
padding: 8px 14px;
background: #B5B5B5;
display: inline-block;
cursor: pointer;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat';
margin-top:0;
color:#363636;
margin-bottom: 13px;
}

.owl-controls { background:url(http://demo.fifothemes.com/pixma/General/img/bg_off.png) repeat-x center; }
.owl-nav {
text-align: right;
margin-top: 15px;
}

.thumbnail { margin-bottom:0; border-radius:3px; }

.title {
background:url(http://demo.fifothemes.com/pixma/General/img/bg_off.png) repeat-x center;
margin-bottom:20px;
}
.owl-theme .owl-controls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
display: inline;/*IE7 life-saver */
margin: 5px;
padding: 3px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
}
.section-title {
padding-right:25px;
padding-left: 25px;
}
.panel { border:0; }
.caption-allshows {
position:absolute;
top:0;
right:0;
background:rgba(66, 139, 202, 0.9);
width:100%;
height:100%;
padding:2%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
border-radius:3px;
}
.owl-next { margin:0 !important; }
.caption-allshows h4 { margin-bottom:3px; color:#fff; }
.caption-allshows p { font-family:'Montserrat'; font-size:11px; }
.thumbnail .caption-allshows { padding-top:30%; }
.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body { border-top:0; }
.panel-title {
font-family: 'Open Sans';
font-size:14px;
}
.panel-group {
margin-bottom:0;
}
.panel-default>.panel-heading {
color: #fff;
background-color: #1B94FF;
border-color: #ddd;
border: 0;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
border-top-color: #ddd;
color: #969696;
background: #F4F4F4;
padding:10px 15px;
}
.panel-heading {
border-top-left-radius:0;
border-top-right-radius:0;
padding: 15px 15px;
}

.footer {
padding: 40px 0 30px 0;
background-color: #272727;
color: #8F8F8F;
vertical-align: bottom;
}
.bordered-icon-lg {
border-radius: 0;
font-size: 34px !important;
border-radius: 50%;
color: #fff;
background-color: #1B94FF;
padding-top: 28px;
height: 90px;
text-align: center;
width: 90px;
}

.number-holder {
background-color:#f5f5f5;
text-align:center;
padding:30px;
border:1px solid #e2e2e2;
}
.number-holder p { margin-top:15px; margin-bottom:15px; }
.number-title {
font-size:48px;
text-transform:uppercase;
color:#838383;
font-family:'Open Sans';
font-weight:800;
margin:0;
line-height: .8;
}

/** About **/
div.title h3 {
text-align: center;
}

/** Shows **/
.hero-show {
background:url(../images/shows/palmtrees.jpg);
height:300px;
background-size:cover;
border-right:1px solid #595959;
border-left:1px solid #595959;
background-attachment: fixed;

}

и мои js файлы, но я уверен, что это не проблема js, потому что im не получает никаких консольных ошибок

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/jquery.animateNumber.js"></script>
<script type="text/javascript" src="js/main.js"></script>

но всякий раз, когда я нажимаю элемент "Моя кнопка", чтобы разбить свои категории, это не подталкивает мой контент. Что может быть неправильным? Я считаю, что правильно следил за всеми документами.

спросил(а) 2015-03-19T20:04:00+03:00 5 лет, 11 месяцев назад
1
Решение
74

Кажется, что html выглядит отлично. Но кажется, что ваш файл jQuery отсутствует. Просто добавьте эту строку: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> прежде чем все ваши другие файлы javascript в верхней части списка и посмотрите, устраняет ли это проблему.

ответил(а) 2015-03-19T20:26:00+03:00 5 лет, 11 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема