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導航圖標消失屏幕

回答

相關問題