我目前正在为一个慈善机构重新设计一个网站,使用带有Bootstrap的YAMM Navbar,我有一个奇怪的情况,如果我只测试Navbar& Bootply上的CSS代码效果很好 - 但是当把它放在我的网络服务器上时,它会因“悬停效应”而出现所有问题(因此Navbar会在悬停时掉线)。 就“小故障”(在我的网络服务器上)而言,菜单会在悬停时下降,但是当您将鼠标向下移动到下拉菜单时 - 它会立即消失。
为了说服自己这不是托管Web服务器的问题,我也在LAMP堆栈虚拟机上运行它,同样的事情发生了。 但是在Bootply上,代码工作得很完美,并且没有'故障'。
首先,这里是Bootply的链接,Navbar悬停工作正常; Bootply code
这是我的WebServer上的网站链接(导航栏在悬停时出现故障): WebServer
这是我的索引页面的实际代码(注意 - 该网站使用Angular,带有索引,所以它只是标题和页脚用作模板。还要注意,它确实包含很多遗留代码,一旦网站完成,将清理它。)
<!DOCTYPE html>
<html lang="en" data-ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="INDEX, FOLLOW">
<meta name="Keywords" content="OpenHouse Christian Involvement Centre, OpenHouse, Christian, Involvement, Centre, Melbourne, Macleod">
<meta name="description" content="Open House, Christian Involvement Centres">
<meta name="author" content="*******">
<meta name="google-site-verification" content="Wp-AVOainmBYwLoJRfZ4dZif0GWjK4wZYGK8WbBOZ8k" />
<link rel="icon" href="images/favicon.ico">
<title>Open House</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/nanogallery.css" rel="stylesheet" type="text/css">
<link href="css/nanogallery.min.css" rel="stylesheet" type="text/css">
<link href="css/nanogallery_clean.css" rel="stylesheet" type="text/css">
<!-- nanoGALLERY - css file for the theme 'light' -->
<link href="css/nanogallery_light.css" rel="stylesheet" type="text/css">
<!-- Yamm styles-->
<link href="css/yamm.css" rel="stylesheet" type="text/css">
<!-- Lightbox Gallery (for Youtube Videos) - css files -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.min.css" rel="stylesheet" type="text/css">
<!-- BXslider - css file -->
<link href="css/jquery.bxslider.css" rel="stylesheet">
<!-- Animate CSS -->
<link rel="stylesheet" href="css/animate.css" />
<!--<link rel="stylesheet" href="css/demo.css" />-->
<!-- Basic Smooth jquery Accordion -->
<!--<link href="css/jquery.bbAccordion.css" rel="stylesheet">-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- ===== Google Fonts ===== -->
<!--<link href="https://fonts.googleapis.com/css?family=Calligraffitti|Kaushan+Script|Sofia" rel="stylesheet">-->
<link href="https://fonts.googleapis.com/css?family=Lato:700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!--</head>-->
<!--<body>-->
<style>
/* ==== Custom CSS for the Donations Button ==== */
/*#donationBtn:hover, #donationBtn:focus, #donationBtn:active {color: #337ab7 !important;}*/
#donationBtn:hover, #donationBtn:focus, #donationBtn:active {background-color: #225e91 !important;}
#lnkMail {
unicode-bidi: bidi-override;
direction: rtl;
}
/* menu styes */
/*.list-unstyled,
.list-unstyled ul { min-width: 120px }
@media ( min-width: 767px ) {
.panel-group { width: 400px; }
.thumbnail { margin: 0; }
}*/
/* === Footer === */
.copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8em;
letter-spacing: 0.225em;
list-style: none;
padding: 0;
text-transform: uppercase;
}
.copyright-icons {
font-size: 2.25em;
/*padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;*/
}
.copyright-icons a {
color: rgba(255, 255, 255, 0.5);
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
.copyright-icons a:hover {
color: #fff;
}
/* Footer */
#footer {
padding: 6em 0 4em 0 ;
background-color: #1d242a;
text-align: center;
}
#footer .icons {
font-size: 1.25em;
}
#footer .icons a {
color: rgba(255, 255, 255, 0.5);
}
#footer .icons a:hover {
color: #fff;
}
#footer .copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8em;
letter-spacing: 0.225em;
list-style: none;
padding: 0;
text-transform: uppercase;
}
#footer .copyright li {
border-left: solid 1px rgba(255, 255, 255, 0.5);
display: inline-block;
line-height: 1em;
margin-left: 1em;
padding-left: 1em;
}
#footer .copyright li:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
#footer .copyright li a {
color: inherit;
}
#footer .copyright li a:hover {
color: #fff;
}
@media screen and (max-width: 480px) {
#footer .copyright li {
border: 0;
display: block;
line-height: 1.65em;
margin: 0;
padding: 0.5em 0;
}
}
@media screen and (max-width: 980px) {
#footer {
padding: 4em 3em 2em 3em ;
}
}
@media screen and (max-width: 736px) {
#footer {
padding: 3em 2em 1em 2em ;
}
}
/*.navbar {
border: 0;
font-family: 'Roboto', sans-serif !important;
}*/
.navbar-default {
background-color: #ffffff; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(white, transparent); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, transparent); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, transparent); /* For Firefox 3.6 to 15 */
background: linear-gradient(white, rgba(255,255,255,0.3)); /* Standard syntax (must be last) */
/*color: #337ab7 !important;*/
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
/*
.navbar-default {
color: #000000 !important;
}
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
} */
/*.dropdown-menu > li > a:hover {
color: white;
background-color: #337ab7;
background-image: none;
}*/
/* ==== Custom Change for Navbar Collapse ==== */
/*@media (max-width: 994px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(51,102,153,0.1);
background-color: white;
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}*/
.yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
}
.yamm .yamm-content {
padding: 3px 15px 3px;
}
.yamm .yamm-content .a:hover {
text-decoration: none;
}
a.nounderline {
text-decoration: none;
font-weight: 400;
color: #333;
line-height: 1.42857143;
}
a.nounderline:hover {
color: #225e91;
font-weight: bold;
}
.dropdown-menu > li > a:hover {
color: #225e91;
background-color: white;
background-image: none;
font-weight: bold;
}
.navbar-default .navbar-nav > li > a:hover {
color: #225e91;
background-color: white;
background-image: none;
border-bottom-style: solid;
border-bottom-color: #225e91;
}
/*.navbar-default .navbar-nav > li.dropdown:hover > a,
.navbar-default .navbar-nav > li.dropdown:hover > a:hover,
.navbar-default .navbar-nav > li.dropdown:hover > a:focus {
background-color: rgb(231, 231, 231);
color: rgb(85, 85, 85);
}*/
/*li.dropdown:hover > .dropdown-menu {
display: block;
}*/
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
/*.dropdown-menu > li > a:hover {
color: #225e91;
font-weight: bold;
background-color: none !important;
}
.dropdown-menu > li:hover {
background-color: none !important;
}*/
img.centered {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<!-- ============ START NAVBAR =========== -->
<nav class="navbar yamm navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<!--<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Yamm Megamenu</a>-->
<!--<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>-->
<a href="#/" class="pull-left"><img src="images/logo-new.png" alt="Open House logo"></a>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="float:right;">
<!-- Home Menu -->
<li class="dropdown"><a href="" data-toggle="dropdown" class="dropdown-toggle"><strong>Home</strong><b class="caret"></b></a>
<ul class="dropdown-menu" id="menu1">
<li><a href="documents/Newsletters/Newsletter_June_2017.pdf" target="_blank">Latest News</a></li>
<li><a href="#events">Coming Events</a></li>
<li><a href="#involved">Get Involved</a></li>
<li><a href="#partners">Partners</a></li>
<li><a href="#ceo">CEO Message</a></li>
<li><a href="#bibleRead">Bible Reading</a></li>
<li><a href="#pray">Pray For Us</a></li>
</ul>
</li>
<!-- About Us Menu -->
<!-- Classic list -->
<!-- Classic list -->
<li class="dropdown yamm-fw"><a href="" data-toggle="dropdown" class="dropdown-toggle"><strong>About Us</strong><b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<ul class="col-lg-4 list-unstyled" style="line-height:1.42857143;">
<li>
<h4 style="color:#225e91;"><strong>Who We Are</strong></h4>
</li>
<li ><a href="#origins" class="nounderline" style="padding-top: 3px; padding-bottom: 3px;">Our Origins</a></li>
<li><a href="#ourhistory" class="nounderline" style="padding-top: 3px; padding-bottom: 3px;">Our History</a></li>
<li><a href="#what" class="nounderline">What We Do</a></li>
<li><a href="#why" class="nounderline">Why We Do It</a></li>
<li><a href="documents/Strategic_Plan-promotional.pdf" target="_blank" class="nounderline">Strategic Plan</a></li>
</ul>
<ul class="col-lg-4 list-unstyled">
<li>
<h4 style="color:#225e91;"><strong>Our People</strong></h4>
</li>
<li><a href="#board" class="nounderline">Our Board</a></li>
<li><a href="#team" class="nounderline">Our Team</a></li>
<li><a href="#volunteers" class="nounderline">Volunteers</a></li>
<li><a href="#supporters" class="nounderline">Supporters</a></li>
</ul>
<ul class="col-lg-4 list-unstyled">
<li>
<h4 style="color:#225e91;"><strong>Resources</strong></h4>
</li>
<li><a href="#photos" class="nounderline">Photos</a></li>
<li><a href="#videos" class="nounderline">Videos</a></li>
<li><a href="#books" class="nounderline">Book</a></li>
<li><a href="#reports" class="nounderline">Annual Reports</a></li>
<li><a href="#newsletter" class="nounderline">News Letters</a></li>
<li><a href="#jobs" class="nounderline">Job Vacancies</a></li>
<li><a href="#policies" class="nounderline">Policies</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<!-- Programs Menu -->
<li class="dropdown yamm-fw"><a href="" data-toggle="dropdown" class="dropdown-toggle"><strong>Programs</strong><b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="yamm-content">
<div class="row">
<ul class="col-lg-6 list-unstyled" style="line-height:1.42857143;">
<li>
<h4 style="color:#225e91;"><strong>Children & Youth</strong></h4>
</li>
<li><a href="#mothers" class="nounderline">Play Group</a></li>
<li><a data-placement="right" data-toggle="tooltip" href="#holiday" class="nounderline" title="School Holiday Program">School Holiday Program</a></li>
<li><a href="#boys" class="nounderline">Boys 2 Men</a></li>
<li><a href="#girls" class="nounderline">Fun 4 Girls</a></li>
<li><a href="#teens" class="nounderline">Drop In Cafe</a></li>
<li><a data-placement="right" data-toggle="tooltip" href="#youth" class="nounderline" title="Youth Workshop Mentoring Program">Youth Workshop Mentoring Program</a></li>
<li><a href="#backyard" class="nounderline">Backyard Sports</a></li>
<li><a href="#bike" class="nounderline">Bike Hut</a></li>
</ul>
<ul class="col-lg-6 list-unstyled" style="line-height:1.42857143;">
<li>
<h4 style="color:#225e91;"><strong>Adults</strong></h4>
</li>
<li><a href="#bibleFellow" class="nounderline">Bible Fellowship</a></li>
<li><a href="#clubwork" class="nounderline">Clubwork</a></li>
<li><a href="#arts" class="nounderline">Arts and Crafts</a></li>
<li><a href="#meal" class="nounderline">Community Meal</a></li>
<li><a href="#individual" class="nounderline">Individual Support</a></li>
<li><a href="#mens" class="nounderline">Mens Support Group</a></li>
<li><a href="#adult" class="nounderline">Adult Workshops</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<!-- Testimonials Menu -->
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><b>Testimonials </b><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#participants">Participants</a></li>
<li><a href="#caregive">Care Givers</a></li>
<!--<li><a href="#sponsors">Our Sponsors</a></li>-->
</ul>
</li>
<li><a href="#links"><b>Useful links </b></a></li>
<li><a href="#contact"><b>Contact Us </b></a></li>
<li><a href="#donations" id="donationBtn" class="btn btn-primary btn-md" role="button" style="margin-top:2px; margin-bottom:-25px; !important; color: #ffffff;"><b> Donations </b><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></li>
</ul>
</div>
</div>
</nav>
<!-- ============ END NAVBAR =========== -->
<!--<script>
//$('a').tooltip();
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>-->
<!-- ==== Navbar Scroll Change ==== -->
<div id="startchange"></div>
<div data-ng-view></div>
<!-- ========= START FOOTER ========== -->
<!--<footer id="footer">
<ul class="icons">
<li><a href="https://www.facebook.com/WiznuForHair/" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="https://www.instagram.com/wiznuforhair/" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© 2017, Open House CIC </li><li>Design: <a href="http://www.bliss.net.au">Bliss</a></li>
</ul>
</footer>-->
<footer class="footer" style="padding: 6em 0 4em 0; background-color: #1d242a;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-4 col-lg-4">
<a href="http://www.acnc.gov.au/" target="_blank">
<img class="img-responsive center-block" src="images/ACNC-Charity-Logo.png" alt="ACNC Charity" width="100" height="100"></a>
</div>
<div class="col-xs-4 col-sm-4 col-lg-4">
<div class="blank-gap-20"></div>
<a href="http://www.qip.com.au/" target="_blank">
<img class="img-responsive center-block" src="images/QIP-logo.png" alt="QIP logo" width="125"></a>
</div>
<!--<div class="visible-sm visible-xs clearfix"></div>-->
<!--<div class="col-xs-6 col-sm-6 col-lg-2 text-center">
<h4><strong>Join Us</strong></h4>
<ul class='list-unstyled'>
<li style="float: left; padding-left:50px; padding-right:5px;"><a data-placement="bottom" data-toggle="tooltip" href="https://www.youtube.com/channel/UClFV3cZ3_e4u3O0zEmYun3w" title="YouTube" target="_blank">
<img class="center-block centered" src="images/icons/youtube.png" width="30"><a></li>
<li style="float: left; padding-right:5px;"><a data-placement="bottom" data-toggle="tooltip" href="https://www.facebook.com/openhousecic/" title="facebook" target="_blank">
<img class="center-block centered" src="images/icons/facebook.png" width="30"></a></li>
<li style="float: left; padding-right:5px;"><a data-placement="bottom" data-toggle="tooltip" href="https://www.linkedin.com/company/open-house-cic" title="LinkedIn" target="_blank">
<img class="center-block centered" src="images/icons/linkedin.jpg" width="30"></a></li>
<li style="float: left; padding-right:5px;"><a data-placement="bottom" data-toggle="tooltip" href="https://www.flickr.com/photos/146218711@N02" title="flickr" target="_blank">
<img class="center-block centered" src="images/icons/Flickr.png" width="30"></a></li>
</ul>
</div>-->
<div class="col-xs-4 col-sm-4 col-lg-4">
<a href="https://www.ndis.gov.au/" target="_blank">
<img class="img-responsive center-block" src="images/NDIS-logo.png" width="100" height="100"></a>
</div>
<!--<div class="col-lg-1"></div>-->
</div>
<div class="row" style="padding-top:10px;">
<div class="col-sm-12 col-md-12 text-center copyright">
<div class="copyright-icons">
<span><i><a href="https://www.facebook.com/openhousecic/" class="icon fa fa-facebook"><!--<span class="label">Facebook</span>--></a></i>
<i><a href="https://www.instagram.com/wiznuforhair/" class="icon fa fa-flickr"><!--<span class="label">Instagram</span>--></a></i>
<i><a href="https://www.linkedin.com/company/open-house-cic" class="icon fa fa-linkedin"></a></i>
<i><a href="#" class="icon fa fa-envelope-o"><!--<span class="label">Email</span>--></a></i></span>
</div>
<span>© 2017, Open House Christian Involvement Centres : Website by <a href="http://www.bliss.net.au" target="_blank">Bliss</a></span>
<div class="blank-gap-10"></div>
<p><i>We acknowledge and pay respect to the Traditional Owners of the lands upon which Open House Christian Involvement Centres are situated.</i><p>
</div>
</div>
</div>
</footer>-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src='js/moment.min.js'></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
<script src="js/ng-csv.min.js"></script>
<script src="js/app.js"></script>
<script src="js/navbar-scroll.js"></script>
<script src="js/email-spam.js"></script>
<script src="js/wow.min.js"></script>
<script>wow = new WOW({}).init();</script>
<!-- NANOGallery Javascript -->
<script type="text/javascript" src="js/jquery.nanogallery.js"></script>
<script type="text/javascript" src="js/jquery.nanogallery.min.js"></script>
<!-- Lightbox Gallery Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<!--<script scr="js/jquery.bbAccordion.js"></script>-->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$(function() {
window.prettyPrint && prettyPrint()
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
})
</script>
</body>
</html>
答案 0 :(得分:1)
你的徽标太大了。
或者您的导航栏太小。
几乎就是这样。在您的实际网站上,您正在加载一个比导航栏高的徽标,因此当您将鼠标悬停在导航栏项目上时,菜单会加载到导航栏下方,但当您将鼠标移动时,鼠标会退出导航栏项目,因此它会认为您和#39;我刚搬走了。
我已经分叉你的Bootply - https://www.bootply.com/Pk3KFvr0RL - 但实际上包含了你的徽标,以便你可以看到问题。
你可以做一些事情。您可以缩小徽标,也可以增加导航项目的大小,以便填充整个区域。一种简单的方法是将padding-top
规则中的padding-bottom
和.navbar-nav>li>a
更改为20px
。可能有更好的方法使它更具响应性(如果您更改徽标的高度等),但这只是一个快速解决方案,随时可以找到更好的方法。