0
我在頁面的響應方面遇到了一些困難。菜單欄會在768px之後消失
正如您在下面的代碼中看到的，當我使用Google開發人員工具檢查響應時，菜單欄將在寬度低於768px後消失？
但我想真有像的414px寬度手機較小的屏幕菜單欄...
/*these are classes, put in class declaration*/
<!--just for the About and data html sheets-->
.navbar,.navbar-collapse,.navbar-brand,.nav,#aboutlink,#print-link{
background: #332A85;
color: #ffffff;
text-align: right;
}
#menu a.active, #menu a:hover ,.nav>li>a:focus, .nav>li>a:hover{
transition-property: background-color, color;
transition-duration: .2s;
transition-timing-function: ease-out;
background-color: #332A85;
color: #fff;
}
#print-link {
pointer-events: none;
cursor: default;
}
.ccusa_container{
padding-top: 12em;
padding-left: 12em;
padding-right: 12em;
margin-bottom: 10px;
color: black;
font-size: 15px;
font-family: 'Open Sans';
text-align: justify;
background-color: white;
}
.jumbotron {
background-color: black;
border: 2px solid black;
text-align: center;
height: 450px;
color: white;
font-family: 'Open Sans', sans-serif;
padding-top: 12em;
padding-left: 12em;
padding-right: 12em;
margin-bottom: 10px;
}
/*-- # = ids -*/
html, body {
height: 0%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
background-color: white;
color: black;
}
h2, h3 {
font-size: 1.2em;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
}
h4 {
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
p {
margin: 10px;
text-align: left;
}
a.header1 {
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
color: #fff;
}
a.body1{
color: purple;
}
hr {
display: block;
margin-top: 1.5em;
margin-bottom: 1.5em;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 2px;
}
.closeinfo {
padding-top: 8em;
padding-left: 8em;
padding-right: 8em;
margin-bottom: 10px;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
background-color: black;
color: #fff;
text-align: center;
height: 300px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td, th {
padding: 8px;
text-align: left;
border: 1px solid black;
}
th {
text-align: left;
}
/*mobile responsivenes*/
@media (max-width: 550px) {
navbar-fixed-top {
width: 400px;
}
#menu {
width: 400px;
position: sticky;
}
h4 {
display: none;
}
.navbar, .navbar-fixed-top, .navbar-header {
width : 100%;
background: #332A85;
color: #332A85;
}
.mapboxgl-canvas-container {
align-content: center;
}
}<!DOCTYPE>
<html>
<head>
\t <meta charset = 'utf8'>
\t <title>Operations - About</title>
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
\t <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
\t <!-- Begin Mapbox requests -->
\t <script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
\t <link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
\t <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js'></script>
\t <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css' type='text/css' />
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
\t <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
\t <link href='https://fonts.googleapis.com/css?family=Fjalla+One|Exo:400,600|Ropa+Sans' rel='stylesheet' type='text/css'>
\t <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
\t <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet">
\t <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Arimo|Dosis|Lato' rel='stylesheet' type='text/css'>
\t <!-- Style Sheets -->
\t <link rel="stylesheet" type="text/css" href="css/style.css">
\t <link rel="stylesheet" type="text/css" href="css/reset.css">
\t <!-- end project-specific asset calls -->
</head>
<body>
\t <div>
\t \t <!--Navbar-->
\t \t <nav class="navbar navbar-fixed-top" role="navigation">
\t \t \t <div class="container-fluid">
\t \t \t \t <!-- Brand and toggle get grouped for better mobile display -->
\t \t \t \t <div class="navbar-header">
\t \t \t \t \t <div class="navbar-brand"><a href="index.html" class="header1"> Project Work</a></div>
\t \t \t \t </div>
\t \t \t \t <!-- Collect the nav links, forms, and other content for toggling -->
\t \t \t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
\t \t \t \t \t <ul class="nav navbar-nav navbar-right">
\t \t \t \t \t \t <li class="nav"> <a href="index.html" class="header1">Map</a></li>
\t \t \t \t \t \t <li class="nav"> <a href="about.html" class="header1">About</a></li>
\t \t \t \t \t \t <li class="nav"> <a href="data.html" class="header1">Data</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </nav>
\t \t </div>
\t \t <!----jumbotron---->
\t \t <div class="jumbotron">
\t \t \t <h3>vitae non volutpat mi nisl amet in sapien enim eget quam sodales nunc nulla ligula tortor integer pretium vitae sit purus ultricies nec vitae nec quam nunc mauris felis turpis blandit risus nunc felis ornare morbi non id cras per eros dignissim orci aenean elit libero sed morbi pellentesque a libero morbi curabitur in in at cum aliquam sed in libero nam mi amet tincidunt sit sit in eros arcu bibendum tortor eleifend vulputate nisl duis turpis erat tincidunt rhoncus sit sit nulla nascetur in in vulputate neque dignissim nisl mauris wisi ac elit esse per diam nam morbi eros auctor ut lacinia libero malesuada justo sed odio montes dolor duis in maecenas faucibus amet
\t \t \t </h3>
\t \t </div>
\t \t <!----TEXT---->
\t \t <div class="col-md-12 text-justify">
\t \t \t <div class="col-md-1 justify"></div>
\t \t \t <div class="col-md-10 justify" style="background-color:##C0C0C0">
\t \t \t </div>
\t \t \t <div class="col-md-1 justify"></div>
\t \t </div>
\t \t <!--Center buttons: GitHub MapBox ATTOM-->
\t \t <div class="col-md-12 text-center" style="background-color:##C0C0C0">
\t \t \t <div class="col-md-1 text-center"></div>
<!----TEXT---->
<div class="bio container-fluid" id="ccusa_container">
\t <!----TEXT---->
\t <div class="col-md-12 text-justify">
\t \t <div class="col-md-1 justify"></div>
\t \t <div class="col-md-10 justify">
\t \t \t <br><br>
\t \t \t </h3>
\t \t </div>
\t \t <div class="col-md-1 justify"></div>
\t </div>
\t <div class="col-md-12 text-center">
\t \t <div class="col-md-2 text-center"></div>
\t \t <div class="col-md-4 text-center">
\t \t \t <p align="center"><center><img src='./static/ccusa_logo.png' style="height: 100px"> </img></center>
\t \t \t \t <br>
\t \t \t \t <center align="center"><a href="https://twitter.com/CCharitiesUSA" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @CCharitiesUSA</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
\t \t \t \t <br>
\t \t \t \t </p>
\t \t \t </div>
\t \t \t <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
\t \t \t <br>
\t <br><br>
\t \t </div>
\t \t <div class="col-md-2 text-center"></div>
\t </div>
\t <br><br>
</div>
</body>
</html>的反應如何，我們感到我提高我的問題嗎？
由於您使用引導程序，因此有一個默認的導航欄，當屏幕寬度很小時，導航欄會相應地改變。您需要更改所有與該菜單相關的@ media選擇器（或者使用一些可以爲您修復的模板）。 – Dekel