html - 菜单栏将在 768px 后消失-6ren

html - 菜单栏将在 768px 后消失

转载作者：太空宇宙更新时间：2023-11-04 08:16:08

25

4

我在页面响应方面遇到了一些困难。

正如您在下面的代码中看到的，当我使用 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>

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

最佳答案

您的问题有 2 个解决方案。

第一个也是很好的一个是 Bootstrap 已经支持的东西，你只是缺少一些代码来让它工作。你有一个工作演示 here

您只需要添加折叠菜单时将显示的按钮。请检查 fiddle 示例。我还将一些 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您有一个可能对您有帮助的答案。

关于html - 菜单栏将在 768px 后消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45897821/

25

4

0

文章推荐： c - 删除最后一个字符，然后连接两个字符串

文章推荐： css - Reactjs 和 Material UI 上的悬停功能

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

html - 菜单栏将在 768px 后消失