菜单栏将在768px后消失

时间：2017-08-26 17:09:31

标签： html css responsive-design

我对页面的响应性有些困难。

正如您在使用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>
	<meta charset = 'utf8'>
	<title>Operations - About</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- Begin Mapbox requests -->
	<script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
	<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js'></script>
	<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' />

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Exo:400,600|Ropa+Sans' rel='stylesheet' type='text/css'>
	<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Arimo|Dosis|Lato' rel='stylesheet' type='text/css'>
	<!-- Style Sheets -->
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<!-- end project-specific asset calls -->
</head>
<body>
	<div>
		<!--Navbar-->
		<nav class="navbar navbar-fixed-top" role="navigation">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<div class="navbar-brand"><a href="index.html" class="header1"> Project Work</a></div>
				</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 navbar-right">
						<li class="nav"> <a href="index.html" class="header1">Map</a></li>
						<li class="nav"> <a href="about.html" class="header1">About</a></li>
						<li class="nav"> <a href="data.html" class="header1">Data</a></li>

					</ul>
				</div>
			</nav>
		</div>

		<!----jumbotron---->
		<div class="jumbotron">
			<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
			</h3>
		</div>

		<!----TEXT---->
		<div class="col-md-12 text-justify">
			<div class="col-md-1 justify"></div>
			<div class="col-md-10 justify" style="background-color:##C0C0C0">
			</div>
			<div class="col-md-1 justify"></div>
		</div>
		<!--Center buttons: GitHub MapBox ATTOM-->
		<div class="col-md-12 text-center" style="background-color:##C0C0C0">
			<div class="col-md-1 text-center"></div>
<!----TEXT---->
<div class="bio container-fluid" id="ccusa_container">
	<!----TEXT---->
	<div class="col-md-12 text-justify">
		<div class="col-md-1 justify"></div>
		<div class="col-md-10 justify">
			<br><br>
			</h3>
		</div>
		<div class="col-md-1 justify"></div>
	</div>
	<div class="col-md-12 text-center">
		<div class="col-md-2 text-center"></div>
		<div class="col-md-4 text-center">
			<p align="center"><center><img src='./static/ccusa_logo.png' style="height: 100px"> </img></center>
				<br>
				<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>
				<br>
				 </p>
			</div>
			 <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>
			<br>
	<br><br>
		</div>
		<div class="col-md-2 text-center"></div>
	</div>
	<br><br>
</div>
</body>
</html>

我如何提高响应能力是我的问题？

1 个答案:

答案 0 :(得分：1)

您的问题有两种解决方案。

第一个和好的是bootstrap已经支持的东西，你只是缺少一些代码来使它工作。您有一个有效的演示here

您只需添加折叠菜单时将显示的按钮。请查看小提琴示例。我还将一些CSS应用到.navbar-header和.navbar-default .navbar-nav > li > a只是为了让示例看起来不错。

      <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>

如果您不想使用Bootstrap支持的折叠菜单，则必须对某些有点难看的CSS类进行硬编码。 Here你有一个可能对你有帮助的答案。

相关问题
最新问题