个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我在尝试让我的 Bootstrap 导航栏在折叠时显示菜单项时遇到了一个大问题。我搜索了整个网站，但没有找到任何有效的方法。我能找到的所有内容都是关于 jquery 或 Bootstrap 版本未正确实现或折叠按钮不可见的讨论。通过修补它，我发现问题是我的自定义 css 弄乱了 bootstrap css，但我终生无法弄清楚要更改什么来修复它。非常感谢任何帮助。这是我的代码。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta -->
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Meta-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class ="navbar-brand">Navbar</h1>
</div>
<div class="collapse navbar-collapse" id ="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li><a href="#homey">Home</a></li>
<li><a href="#abou">About</a></li>
<li><a href="#porty">Portfolio</a></li>
<li><a href="#conty">Contact</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS
.navbar {
height: 125px;
}
.navbar-brand {
position: relative!important;
left: 100px!important;
bottom: 10px!important;
font-size: 4em!important;
color: white!important;
font-family: 'Montserrat', sans-serif;
}
.nav.navbar-nav.navbar-left li a {
color: white;
position: relative;
right: 175px;
top: 66px;
font-family: 'Montserrat', serif;
}
.nav.navbar-nav.navbar-left li a:hover {
color: orange;
}
.navbar-collapse.collapse {
display: none !important;
}
@media (max-width: 990px) {
.navbar-header {
float: none !important;
}
.navbar-toggle {
display: block !important;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin: 7.5px -15px;
}
}
@media screen and (max-width: 768px) {
.navbar-brand {
font-size: 40px !important;
position: relative !important;
top: -20px !important;
left: -10px !important;
}
.navbar {
height: 70px;
}
}
@media screen and (max-width: 568px) {
.navbar-brand {
font-size: 30px !important;
position: relative !important;
bottom: 20px !important;
left: -3px !important;
!important;
}
.navbar {
height: 50px;
}
}
@media screen and (max-width: 420px) {
.navbar-brand {
font-size: 25px !important;
}
}
@media screen and (max-width: 365px) {
.navbar-brand {
font-size: 20px !important;
}
}
@media screen and (max-width: 275px) {
.navbar-brand {
font-size: 15px !important;
}
}
这是一支代码笔:Navbar
最佳答案
因为您的 .nav.navbar-nav.navbar-left li a {} 在移动 View 中实际上将它定位在屏幕之外并且它的颜色是白色，所以您将无法看到它。
因此，当您的窗口进入移动尺寸时，我明确删除了您的定位和颜色。另外，注意到我已经注释掉了下面的 display:none。这应该可以帮助您稍微重新考虑一下您的 CSS。在移动 View 中，除非您为标签指定不同的 css，否则它将使用您之前指定的那个。尝试将其粘贴到您的上并根据需要进行调整。 :)
@media (max-width: 990px) {
.navbar-header {
float: none !important;
}
.nav.navbar-nav.navbar-left li a {
color: black;
right: 0px;
top: 0px;
}
.navbar-nav {
float: none !important;
margin: 7.5px -15px;
}
}
关于html - Bootstrap 导航栏折叠切换显示单条黑线而不是菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36902766/
26
4
0
我正在寻找将单个条形“图表”转换为圆环图的最快/最简单/最轻的方法。目前数据在一个 div 中，它由三个 span 元素组成，包含来自 Typescript 和 mongoDB 后端的数据。在这种情况
我是一名优秀的程序员,十分优秀！