2014-01-13 5 views
1

мне нужно сделать ответную Navbar, и я хотел бы использовать что-то вроде этогоBootstrap оправдано нав не работает

http://getbootstrap.com/examples/justified-nav/

он должен загрузить как этот enter image description here

и когда мин-ширина достигает 768px, он изменяется на это enter image description here

Но в моем проекте он загружается как этот, и он не изменяется вообще

enter image description here

Я использовал стили из примера страницы (http://getbootstrap.com/examples/justified-nav/justified-nav.css)

Это то, что находится внутри тела моего HTML

<header> 
<a href="/index.html"><img id="logoss" src="images/logo.png"></a> 
       <ul class="nav nav-justified"> 
        <li class="active"><a href="#">Empresa</a></li> 
        <li class="divider-vertical"></li> 
        <li><a href="#">Medios</a></li> 
        <li class="divider-vertical"></li> 
        <li><a href="#">Acci&oacuten</a></li> 
        <li class="divider-vertical"></li> 
        <li><a href="#">Herramientas</a></li> 
        <li class="divider-vertical"></li> 
        <li><a href="#">Staff-Sumate</a></li> 
        <li class="divider-vertical"></li> 
        <li><a href="#">Contacto</a></li> 
       </ul></header> 

и все мои style.css

* { 
    margin:0; 
    padding:0; 
} 

body { 
    background-color:#3b8476; 
} 

header { 
    height:200px; 
    margin: 0 auto; 
    max-width: 80%; 
    background-color:#fff; 
    background: #dddddd; /* Old browsers */ 
    background: -moz-linear-gradient(top, #dddddd 0%, #ffffff 16%, #ffffff 82%, #dddddd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(16%,#ffffff), color-stop(82%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#dddddd',GradientType=0); /* IE6-9 */ 

} 

#logoss { 
    height:8em; 
    width:8em; 
    display:inline-block; 
    margin:2em; 
} 


/* from justified navbar example */ 


.nav-justified { 
    background-color: #eee; 
    border-radius: 5px; 
    border: 1px solid #ccc; 
} 
.nav-justified > li > a { 
    margin-bottom: 0; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    color: #777; 
    font-weight: bold; 
    text-align: center; 
    border-bottom: 1px solid #d5d5d5; 
    background-color: #e5e5e5; /* Old browsers */ 
    background-repeat: repeat-x; /* Repeat the gradient */ 
    background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ 
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */ 
    background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0); /* IE6-9 */ 
    background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */ 
} 
.nav-justified > .active > a, 
.nav-justified > .active > a:hover, 
.nav-justified > .active > a:focus { 
    background-color: #ddd; 
    background-image: none; 
    box-shadow: inset 0 3px 7px rgba(0,0,0,.15); 
} 
.nav-justified > li:first-child > a { 
    border-radius: 5px 5px 0 0; 
} 
.nav-justified > li:last-child > a { 
    border-bottom: 0; 
    border-radius: 0 0 5px 5px; 
} 

@media (min-width: 768px) { 
    .nav-justified { 
    max-height: 52px; 
    } 
    .nav-justified > li > a { 
    border-left: 1px solid #fff; 
    border-right: 1px solid #d5d5d5; 
    } 
    .nav-justified > li:first-child > a { 
    border-left: 0; 
    border-radius: 5px 0 0 5px; 
    } 
    .nav-justified > li:last-child > a { 
    border-radius: 0 5px 5px 0; 
    border-right: 0; 
    } 
} 
+1

Можете ли вы разместить код? –

+0

Я только что отредактировал сообщение и добавил код –

ответ

0

Что-то не так с версией boo tstrap Я использую, я обновил файл и работал отлично, спасибо всем, кто пытался помочь

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