Привет, я просто создаю домашнюю страницу для отображения данных датчиков, я не являюсь веб-разработчиком. Я выбрал бутстрап-фреймворк для убеждения проектирования менее кропотливо, однако я не в состоянии заставить меню гамбургера работать, когда я открываю страницу на телефоне, если я открываю страницу на рабочем столе, я хочу обычную навигационную панель, но когда я открываю ее по телефону, я хочу только кнопку меню гамбургера, которая должна отображать элементы навигационной панели при нажатии ,Отобразить меню гамбургера, когда мобильная платформа еще работает на настольном навигационном баре с использованием загрузочного устройства
Вот код, у меня есть:
<!-- 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-collapse», а не navbar в navbar, поскольку navbar - это меню. –
Можете ли вы объяснить, как вы хотите, чтобы он выглядел на рабочем столе? так как это то, что сбивает с толку, поскольку с вашего кода кажется, что вы хотите, чтобы панировочные сухари над панелью меню на рабочем столе, это правда? –