Question

希望得到一些帮助。我的Bootstrap导航正在屏幕的右侧运行？我修复了右侧和左侧的白色空间，但现在帮助＆＃39;链接正在运行。有什么建议？

的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;
}`

Answer 1

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

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

保证金权利：-15px;是可能的问题。此规则位于bootstrap文件夹中的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的问题。

我希望有所帮助。

祝你有个美好的一天。

屏幕上的bootstrap导航图标消失

1 个答案: