显示汉堡菜单当移动平台其他桌面导航栏使用引导

问题描述：

嗨，我只是建立一个主页显示传感器数据，我不是一个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个环节。

把我的电线混在一起......脑海里分享的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。

3_ '__Toggle Navigation__ 这个汉堡包菜单在移动设备和桌面上显示，我希望只有导航栏可见桌面 –

我更新了代码和jsFiddle。菜单根据设备的观点（分辨率）而有所不同......这就是Bootstrap的工作原理以及其他大多数框架，如Zurb Foundation。如果你想检测手机和桌面的不同，那么Bootstrap的默认菜单不适合你......而你必须找到一个JS解决方案，这个问题将不会被覆盖。 –

如果你想断点更小....然后改变767px 640px和768至641px等 –

显示汉堡菜单当移动平台其他桌面导航栏使用引导

相关推荐