Bootstrap導航欄摺疊

我目前使用bootstrap的導航欄爲了在屏幕變小時摺疊元素。有兩個div會在屏幕變小時崩潰，但在它們崩潰之前，這些元素會彼此堆疊在一起。Bootstrap導航欄摺疊

我想什麼做的，是在半屏的導航鏈接失敗，然後在右邊的社交媒體圖標，但是使用引導的「隱藏sm」似乎不起作用。我在bootstrap上很新，並希望得到一些關於如何解決這個問題的建議。

我的HTML：

<!-- NAVIGATION BAR --> 
<div class="navbar navbar-default navbar-static-top navbar-inverse"> 

    <div class="container"> 

    <!-- HOME BRAND --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img src="./newnewfoy.png"> 
     </a> 
    </div> 

    <!-- NAV LINKS --> 
    <ul class="nav navbar-nav navbar-collapse collapse"> 
     <li class="nav-item"> 
     <a class="nav-link active" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Event</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Volunteer</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Sponsors</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Contact</a> 
     </li> 
    </ul> 

    <!-- NAV MEDIA --> 
    <div class="nav navbar-collapse collapse medialinks hidden-xs"> 
     <a id="YOUcon" class = "mediacon" href="#"></a> 
     <a id="IGcon" class = "mediacon" href="#"></a> 
     <a id="TWTcon" class = "mediacon" href="#"></a> 
     <a id="FBcon" class="mediacon" href="#"></a> 
    </div> 

    </div> 

</div>

CSS：

.nav{ 
    height: 50px; 
} 

.mediacon{ 
    float: right; 
} 

.medialinks{ 
    float: right; 
} 

.navbar-brand{ 
    padding-top: 7px; 
}

來源

2017-07-18 Tin La

你必須添加一個按鈕到導航欄標題打開和關閉導航欄。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span>       
</button>

我創建了一個工作小提琴https://jsfiddle.net/x32tf96L/

HTML

<div class="container-fluid"> 

    <!-- HOME BRAND --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
    </button> 
    <a class="navbar-brand" href="#"> 
     <img src="./newnewfoy.png"> 
    </a> 
    </div> 

    <!-- NAV LINKS --> 
    <ul class="navbar-collapse collapse" id="myNavbar"> 
    <li class="nav-item"> 
     <a class="nav-link active" href="#">Home</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Event</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Volunteer</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Sponsors</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Contact</a> 
    </li> 
    </ul> 

    <!-- NAV MEDIA --> 
    <div class="nav navbar-collapse collapse medialinks hidden-xs"> 
    <a id="YOUcon" class = "mediacon" href="#"></a> 
    <a id="IGcon" class = "mediacon" href="#"></a> 
    <a id="TWTcon" class = "mediacon" href="#"></a> 
    <a id="FBcon" class="mediacon" href="#"></a> 
    </div> 

</div>

CSS是一樣的。

來源

2017-07-18 00:52:03 Pete

我不認爲這樣會合攏導航鏈接之前的社交媒體圖標，不是嗎？我打算爲鏈接做一個按鈕，但我想確保在製作按鈕時不會發生這種情況。 –

你可以爲你的社交圖標添加代碼嗎 – Pete

我使用了對圖標的反應，所以他們不會只顯示在jsfiddle上。我解決了我的問題，非常感謝！ –

我解決了它。

解決方案：

<div class="container"> 

    <!-- BRAND, BUTTON --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img src="./newnewfoy.png"> 
     </a> 
    </div> 

    <!-- NAV LINKS --> 
    <div> 
     <ul class="nav navbar-collapse collapse navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link active" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Event</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Volunteer</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Sponsors</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Contact</a> 
     </li> 
     </ul> 

     <div class="medialinks hidden-sm"> 
     <a id="YOUcon" class = "mediacon" href="www.google.com"></a> 
     <a id="IGcon" class = "mediacon" href="www.google.com"></a> 
     <a id="TWTcon" class = "mediacon" href="www.google.com"></a> 
     <a id="FBcon" class="mediacon" href="www.google.com"></a> 
     </div> 
    </div> 
</div>

來源

2017-07-18 01:42:56

Bootstrap導航欄摺疊

回答

相關問題