bootstrap导航图标消失屏幕

希望有一点帮助。我的Bootstrap导航在屏幕的右侧运行？我修正了左右两侧的空白区域，但现在“帮助”链接正在运行。有什么建议么？bootstrap导航图标消失屏幕

的index.html

<div id="header"> 
<!--CSS deals with header image--> 
</div> 
    <h1>Hands on Sports & Holistic Therapy</h1> 

<!--navbar--> 
<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data- 
toggle="collapse" data-target="#navbar" aria-expanded="false" aria- 
controls="navbar"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="index.html">Home<span class="sr-only">(current) 
</span></a></li> 
      <li><a href="treatments.html">Treatments</a></li> 
      <li><a href="bookings.html">Bookings</a></li> 
      <li><a href="shop.html">Shop</a></li> 
      </ul> 

    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="login.html">Log In</a></li> 
    <li><a href="checkout.html">Basket<span class="badge">5</span></a></li> 
     <li><a href="account.html"></a></li> 
    <li><a href="contact.html">Contact</a></li> 
    <li><a href="help.html">Help</a></li> 
     </ul> 
    </div> 
</div> 
</nav> 
</head> 
<body>

cssgeneric.css

#header{ 
background:url('banner5.jpg') no-repeat top center; 
background-size: 95%; 
width: 100%; 
height: 200px; 
margin-top: 50px; 
} 
#navbar{ 
background-color: #ccb69b; 
margin-left:-20px; 
margin-right:-15px; 
}`

来源

2017-03-08 Anniee

也许将代码清理成演示问题的最小示例。 – ZimSystem

对不起 - 已将代码清除 - 我不知道是否有任何影响它的可能。 – Anniee

我可以在CSS规则看，我认为是有可能这就是问题所在。

@media (min-width: 768px) 
    navbar.less:380 
    .navbar-right { 
    float: right!important; 
    margin-right: -15px; 
}

右边距：-15px;是可能的问题。此规则位于引导文件夹中的navbar.less中。

在您的CSSGeneric.css中，我更改并添加新规则。

/*line 76*/ 
#navbar{ 
    background-color: #ccb69b; 
    margin-left:-20px; 
    margin-right:-15px; 
} 
ul.nav.navbar-nav.navbar-right { 
    margin-right: 0px; 
}

我添加了ul.nav.navbar-nav.navbar-right来解决navbar.less的问题。

我希望有所帮助。

祝你有美好的一天。

来源

2017-03-08 14:30:02

优秀的，修复它，非常感谢！ – Anniee

bootstrap导航图标消失屏幕

回答

相关问题