顯示漢堡菜單當移動平臺其他桌面導航欄使用引導

嗨，我只是建立一個主頁顯示傳感器數據，我不是一個Web開發人員我選擇bootstrap框架說服設計較辛苦，但我不是當我打開手機上的頁面時，如果我在桌面上打開頁面，我可以使漢堡包菜單正常工作我想要普通導航欄，但是當我在手機上打開它時，我只需要漢堡包菜單按鈕，當按下時應顯示導航欄的項目。顯示漢堡菜單當移動平臺其他桌面導航欄使用引導

這裏是我的代碼：

<!-- Bootstrap Core CSS --> 
    <link href="vendor/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> 
    <!-- Custom CSS --> 
    <style> 
    body { 
     padding-top: 70px; 
     font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif; 

     /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ 
    } 

    .no-border { 
     border: none; 
     background-color: white; 
     outline: none; 
     cursor: pointer; 
    } 
.color-no-focus { 
     color: grey; 
    } 
    .hover:hover { 
     color: blue; 
    } 
.white { 
     color: white; 
    } 


.btn-circle { 
    width: 70px; 
    height: 70px; 
    text-align: center; 
    padding: 6px 0; 
    font-size: 12px; 
    line-height: 1.42; 
    border-radius: 32px; 
    float: right; 
} 

    #container1 
    { 
     margin-bottom:10px 
    } 

    </style> 

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
<!-- jQuery Version 1.11.1 --> 
<!--script src=" vendor/jquery/1.11.1/jquery-1.11.1.js"></script--> 
<!-- Bootstrap Core JavaScript --> 
<script src="vendor/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script type="text/javascript" src="js/dataDisplay.js"></script> 

</head> 
    <body> 
    <!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <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="#">Access Home Online</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="navbar navbar-default navbar-fixed-top" id="bs-example-navbar-collapse-1"> 
       <ul class="breadcrumb"> 
        <li> 
         <a class="breadcrumb-item" href="index.htm">Home</a> 
        </li> 
        <li> 
         <a class="breadcrumb-item" href="settings.htm">Settings</a> 
        </li> 
        <li> 
         <a class="breadcrumb-item" href="connected-sites.htm">Sites</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav>

，這就是我得到我的手機上：

移動視圖我不希望上述3個環節。

來源

2017-02-17 Ciasto piekarz

把我的電線混在一起......腦海裏分享的URL？或者有一個JSFiddle？ –

這個問題將是因爲你的標記不正確，你應該有兩個'navbar'。導航欄的兄弟應該是像導航欄內的「導航欄崩潰」而不是導航欄，因爲導航欄是菜單。 –

你能解釋一下你想讓它看起來像在桌面上嗎？因爲從你的代碼中看到你想讓桌面上的菜單欄上的麪包屑變得混亂，這是真的嗎？ –

漢堡包不工作的主要問題是因爲您有兩個navbar類，您只能在父容器上使用一次。既然你想要一個麪包屑佈局，那麼最簡單的方法就是使用兩個不同的菜單，一個用於桌面，另一個用於移動設備。這不是最好的方法，但一個好的方法是，如果你有良好的CSS知識和耐心，你可以刪除額外的菜單，並使用媒體查詢重新工作CSS，以模仿與class breadcrumb相同的樣式。

這裏的HTML代碼的工作原理：

<header> 
    <ul class="breadcrumb"> 
    <li><a class="breadcrumb-item" href="index.htm">Home</a></li> 
    <li><a class="breadcrumb-item" href="settings.htm">Settings</a></li> 
    <li><a class="breadcrumb-item" href="connected-sites.htm">Sites</a></li> 
    </ul> 
    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
    <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="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <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="#">Access Home Online</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li><a href="index.htm">Home</a></li> 
      <li><a href="settings.htm">Settings</a></li> 
      <li><a href="connected-sites.htm">Sites</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</header>

這裏的CSS去與這個HTML：

@media(max-width:767px){ 
    header .breadcrumb { 
    display: none; 
    } 
} 
@media(min-width:768px){ 
    header .navbar { 
    display: none; 
    } 
}

一個更新的jsfiddle可以看出working online ...測試各種模式會調整結果窗口的大小以模擬不同的設備大小。

3倍圖標條班的目的

自舉理由採用3X圖標條的跨越是因爲漢堡包圖標是由使用CSS 3行，每行你在這個CSS：

.navbar-toggle .icon-bar { 
    display: block; 
    width: 22px; 
    height: 2px; 
    border-radius: 1px; 
}

每行長22px，高2px，邊框半徑爲1px。

來源

2017-02-17 21:42:06

3_ '__Toggle Navigation__ 這個漢堡包菜單在移動設備和桌面上顯示，我希望只有導航欄可見桌面 –

我更新了代碼和jsFiddle。菜單根據設備的觀點（分辨率）而有所不同......這就是Bootstrap的工作原理以及其他大多數框架，如Zurb Foundation。如果你想檢測手機和桌面的不同，那麼Bootstrap的默認菜單不適合你......而你必須找到一個JS解決方案，這個問題將不會被覆蓋。 –

如果你想斷點更小....然後改變767px 640px和768至641px等 –

顯示漢堡菜單當移動平臺其他桌面導航欄使用引導

回答

相關問題