1
こんにちは私はセンサデータを表示するホームページを構築しています。私はウェブ開発者ではありませんが、私はあまり苦労せずに設計するという確信のためにブートストラップフレームワークを選びました。デスクトップ上でページを開くと、通常のナビゲーションバーが必要になりますが、電話で開くと、押したときにナビゲーションバーの項目を表示するだけのハンバーガーメニューボタンが必要になります。モバイルプラットフォームで他のデスクトップのナビゲーションバーをブートストラップを使用して表示する
<!-- 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を入手しましたか？ –
問題は、あなたのマークアップが間違っていて、あなたが2つの 'navbar'を持っていなければなりません。 navbarの兄弟は、navbarがメニューであるので、navbar内のnavbarではなく、 'collapse navbar-collapse'のようなものでなければなりません。 –
デスクトップ上でどのように見えるか説明できますか？デスクトップ上のメニューバーの上にパンくずリストが必要なように見えるので、あなたのコードから混乱しているものがあるからです。これは本当ですか？ –