Bootstrap: Farklı genişlikler için hem üst hem de alt sabit navbarın kullanılması

Question

Şu anda Bootstrap navbar'larımla mücadele ediyorum. Maksimum genişlik 767px olan cihazlar için, ekranın alt kısmında sabitlenmiş bir nav çubuğu istiyorum. Tüm büyük cihazların üstüne sabitlenmiş bir nav çubuğu olmalıdır. Toplulukta bazı ilgili soruları okudum ve bana bir şekilde yardım etmeme rağmen henüz sorumu cevaplamadı.

Versiyon: Dreamweaver CC 2015

cevap olmalıdır benim soru için medya sorguları kullanarak ama nasıl bilmiyorum: 3.3.6 Versiyon Önyükleme. Doğru isem, şu kod işini (hatam varsa düzeltin) yapmalıdır:

.no-overflow{ 
    display:none; 
} 

Ben, nasıl düzgün benim nav barkodun medya sorgusu eklerim olduğunu bilmek gerekir şey:

@media (max-width: 767px) { 
.navbar-default .navbar-nav .open .dropdown-menu > li > a { 
color: #ecf0f1; 
} 
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
color: #ffffff; 
} 
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, 
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, 
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
color: #ffffff; 
background-color: #d35500; 
} 

HTML kodunu tabana sabitlenmiş:

<nav class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bottomFixedNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
     <a class="navbar-brand" href="#">Brand</a></div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bottomFixedNavbar1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

peşin!

Answer 1

sadece yakın ayraç gerekir:

@media (max-width: 767px) { 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #ecf0f1; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #ffffff; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #ffffff; 
    background-color: #d35500; 
    } 
} 

Answer 2

Ben HTML nasıl göründüğünü emin değilim ama (ben cevap bulduk bu

@media (max-width: 767px) { 
    /* This select may need to changed */ 
    .navbar.navbar-fixed-top { 
     position: fixed; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     width: 100%; 
    } 
} 

Answer 3

gibi bir şey yapmak için kendimi istiyoruz topluluğun yardımıyla). Ben yayınlayacağım, başkalarına yardımcı olabilir.

@media (max-width: 767px) { 

    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #ecf0f1; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #ffffff; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #ffffff; 
    background-color: #d35500; 
    } 
.navbar-toggle { 
    color: #ffffff; 
} 
.navbar.navbar-default.navbar-fixed-top { 
    display: none; 
} 



} 

@media (min-width:768px){ 
.navbar.navbar-default.navbar-fixed-bottom { 
    display: none; 
} 

} 

Ekranla yakınlaştım: yok; kodu. Bender sayesinde fark ettim ki .Navbar.navbar-default.navbar-fixed-bottom ve .navbar.navbar-default.navbar-fixed-top.

Not: Bunu yapmak isteyenler için de. 2 medya sorgusu yaptığınızdan emin olun. 1 en büyük sabit navbarın 768 pks maksimum genişliğe sahip olmaması ve 1 sabit genişlikli 768 piksel ile sabit navbarın görüntülenmemesi için 1 medya sorgusunun gösterilmemesi.