引導4倒塌的導航欄

我試圖重新安排我的導航欄倒塌我引導4使它看起來像現在這樣的權利：引導4倒塌的導航欄

有沒有辦法來對齊在一行的社交媒體按鈕，將'關於'進一步降低並擺脫'項目'和'聯繫'前的空間？

這是到目前爲止我的代碼：

<nav class="navbar navbar-fixed-top navbar-light bg-faded"> 
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
    &#9776; 
</button> 
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> 
    <a class="navbar-brand" href="#">Timo Springer</a> 
    <ul class="nav navbar-nav m-x-auto" style="width: 300px;"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#about">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#projects">Projects</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#contact">Contact</a> 
     </li> 
    </ul> 
    <ul class="nav navbar-nav pull-md-right"> 
     <li class="nav-item"> 
      <a class="nav-link" href="https://www.facebook.com/timo.springer"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="https://www.instagram.com/springertimo/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="https://500px.com/timospringer"><i class="fa fa-500px" aria-hidden="true"></i></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="https://de.linkedin.com/in/timo-springer-372468129"><i class="fa fa-linkedin" aria-hidden="true"></i></a> 
     </li> 

    </ul> 
</div>

非常感謝！

蒂莫

來源

2016-10-17 Timo Springer

只需添加clear:both在導航標籤在媒體CSS

@media (max-width:767px){ 
    .nav.m-x-auto{ 
    clear:both; 
    margin: 0 !important; 
    } 
    .nav.navbar-nav.pull-md-right li{ 
    float:left; 
    } 
    .nav.navbar-nav.pull-md-right li + li{ 
     margin-left: 1rem; 
    } 
}

這裏是Demo

來源

2016-10-17 06:33:29

非常感謝！這工作！ –

很高興我幫你:) –

我認爲下面應該工作。

ul.nav.navbar-nav.m-x-auto { 
float: none!important; 
clear: both!important; 
width: 100%!important; 
} 

ul.nav.navbar-nav.pull-md-right { 
width: 100%!important; 
clear: both!important; 
float: none!important; 
} 

ul.nav.navbar-nav.pull-md-right > li { 
width: 25%; 
text-align: center; 
display: inline-block!important; 
}

來源

2016-10-17 06:38:01 Raj

謝謝！它在崩潰時正在工作。它在桌面模式下崩潰了我的導航欄。 –

如果摺疊菜單出現在768像素以下，然後用（max-width：767px）替換它，則應將上述代碼放在媒體查詢（如@media唯一屏幕和（max-width：991px））內。 – Raj

引導4倒塌的導航欄

回答

相關問題