引导导航图标从屏幕上消失答案

【问题标题】：bootstrap navigation icon dissapearing off screen引导导航图标从屏幕上消失
【发布时间】：2017-03-08 14:02:48
【问题描述】：

希望能得到一点帮助。我的 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;
}`

【问题讨论】：

也许将代码清理为一个演示问题的最小示例。
对不起 - 已经清理了代码 - 我不知道是否有任何影响它。

标签： html css twitter-bootstrap navigation

【解决方案1】：

我可以在 CSS 中看到一条规则，我认为这可能是问题所在。

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

margin-right: -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 的问题。

希望对你有所帮助。

祝你有美好的一天。

【讨论】：