如何在摺疊時向引導程序添加其他鏈接

對於我正在處理的網站，我有兩組鏈接。第一個是位於屏幕頂部的導航欄中，由我的帳戶和登錄名組成。然後我在頁面上有一些小的方法，我想知道是否有辦法將這些鏈接添加到摺疊菜單。截至目前，摺疊菜單僅顯示導航欄中的兩個鏈接。如何在摺疊時向引導程序添加其他鏈接

注：我已經嘗試將第二個導航欄添加到導航欄摺疊和摺疊類。這使得當頁面爲< 768px時不會顯示第二個導航欄，並且當您單擊該圖標（3個水平' - '）時出現第二個導航鏈接。但是，第二個導航欄中的鏈接不會顯示在主導航欄的兩個鏈接中。下面

代碼應該有助於澄清什麼，我想說：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head  content must come *after* these tags --> 
    <title>Bootstrap Project - Landing Page</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 


    <style> 
     #container-top{ 
      background-color: #65000A; 
      color: white;   
     } 

     .navbar-default .navbar-nav li a { 
      color: white; 
     } 

     #welcome{ 
      position: relative; 
      top: 12px; 
      margin-right: 20px; 
     } 

     .navbar-default .navbar-nav .active a{ 
      background-color: white; 
      color: #4F5153; 
     } 

     .navbar-default .navbar-nav li a:hover{ 
      color: #D76E73; 
     } 

     #topContainer { 
      height: 400px; 
      width: 100%; 
      background-size:cover; 
     } 

     #topContainer2 { 
      background-color: red; 
      height: 400px; 
      width: 100%; 
      background-size:cover; 
     } 

     .break { 
      clear:both; 
     } 

     #logoDiv { 
      width: 400px; 
      float: left; 
     } 

     #logoDiv a{ 
      text-decoration: none; 
     } 

     #mainDiv { 
      font-family: Georgia, serif; 
      margin-top: 75px; 
      margin-left: 50px; 
     } 

     .imgLogo { 
      position: relative; 
      top: 7px; 
      width: 50px; 
      height: 50px; 
      float: left; 
      margin-right: 5px; 
     } 

     #mainDiv h1{ 
      color: #65000A; 
      margin: 0; 
      font-size: 2.3em; 
      margin: 0; 
      padding: 0; 
     } 

     #subLogo{ 
      color: #65000A; 
      margin: 0; 
      padding: 0; 
      font-size: 1.2em; 
      font-weight: bold; 
     } 

     #mainNav { 
      margin-top: 20px; 
      margin-bottom: 20px; 
      color: #4F5153; 
     } 

     #mainNav ul{ 
      position: relative; 
      top: 10px; 
     } 

     #mainNav li{    
      list-style: none; 
      font-weight: bold; 
      font-size: 0.9em; 
      border-right: 1px solid #d6d6d6;    
      height: 100%; 
      padding: 10px 20px 12px 20px; 
      float: left; 
     }  






     .bold { 
      font-weight: bold; 
     } 

     .marginTop { 
      margin-top: 30px; 
     } 

     .center { 
      text-align: center; 
     } 

     .title { 
      margin-top: 100px; 
      font-size: 300%; 
     } 

     #footer { 
      background-color: #B0D1FB; 
      padding-top: 70px; 
      width: 100%; 
     } 

     .appstoreImage { 
      width: 250px; 
     } 
    </style> 
</head> 
<body data-spy="scroll" data-target=".navbar-collapse"> 

    <div class="navbar navbar-default navbar-fixed-top" id="container-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>  
       </button> 
       <p><span id="welcome">Welcome to Celebrity Beauty Online!</span></p> 
      </div> 

      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navLink"> 
        <li class="active"><a href="#home"><span class="glyphicon glyphicon-user"></span> My Account</a></li> 
        <li><a href=""><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 


    <div class="container contentContainer" id="topContainer"> 
     <div class="row"> 
      <div class="" id="mainDiv"> 
       <div id="mainTop"> 
        <div id="logoDiv"> 
         <a href="index2.html"> 
          <img class="imgLogo" src="images/clapperboard_logo.png" /> 
          <h1 class="marginTop" id="logo">XYZ</h1><span id="subLogo">BEAUTY SUPPLY &#38 SALON</span> 
         </a> 
        </div> 

        <div class="collapse navbar-collapse" id="mainNav"> 
         <ul class="nav navbar-nav"> 
          <li>Home</li> 
          <li>About</li> 
          <li>Salon</li> 
          <li>Current Sales!</li> 
          <li style="border-right:none;">Contact Us</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
</body>

感謝您的幫助！

來源

2015-05-26 xCasper

你對我的第二個菜單容器，目前尚不清楚是什麼預期的輸出應該看起來和行爲像.. – nozzleman

我想使它，所以說的家庭/關於/等顯示在我的帳戶和登錄出現在移動菜單中的鏈接。我希望當某人在更大的屏幕上時，鏈接顯示爲現在的狀態，如果在較小的屏幕上（如電話）上查看網站，則會顯示在摺疊的引導菜單中。這有幫助嗎？ – xCasper

您可以將菜單項複製到您的導航欄中，但將它們隱藏起來用於更大的顯示。

如果將此添加到您的導航欄中，它將隱藏在md和lg顯示中。

<li class="hidden-md hidden-lg">About</li>

如果要隱藏你創建你可以在類添加到div將其隱藏在小尺寸顯示屏

<div class="container contentContainer hidden-xs hidden-sm" id="topContainer">

來源

2015-05-27 16:18:06 Steve

太棒了！非常感謝你。我甚至沒有想過要嘗試！ – xCasper

如何在摺疊時向引導程序添加其他鏈接

回答

相關問題