嗨,我只是建立一个主页显示传感器数据,我不是一个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'。导航栏的兄弟应该是像导航栏内的“导航栏崩溃”而不是导航栏,因为导航栏是菜单。 –
你能解释一下你想让它看起来像在桌面上吗?因为从你的代码中看到你想让桌面上的菜单栏上的面包屑变得混乱,这是真的吗? –