Question

我在某些屏幕上遇到了一些引导程序菜单的问题，因为您可以看到here

我已移除 navbar-right ，但它无效。而且我没有任何特殊的css更改。只是一些字体大小和颜色。

<nav class="navbar">
<div class="container-fluid social-nav">
    <a href="https://www.facebook.com/"><img alt="Facebook" src="images/soc-icon4.png"></a>
    <a href="https://www.instagram.com/"><img alt="Instagram" src="images/soc-icon3.png"></a>
</div>

<div class="container-fluid menu-nav">
    <div class="navbar-header logo">
      <a href="index.html"><img alt="Dra Camila" src="images/logo.png"></a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="myactive"><a href="index.html">Home</a></li><hr>
      <li><a href="sobre.html">About</a></li><hr>
      <li><a href="serviços.html">Services</a></li><hr>
      <li><a href="tratamentos.html">Treatments</a></li><hr>
      <li><a href="contato.html">Contact</a></li>
    </ul>
</div>
</nav>

有任何修复建议吗？

Answer 1

摆脱menu-nav中的填充，您已全部设置：

.menu-nav {
    background-color: rgba(0, 0, 0, 0.7);
    /* padding: 10px 150px 10px 150px; */
}

对于iPad视图中的其他问题，请为浮动项目指定宽度并更改菜单：

@media (min-width: 768px)
.navbar-nav>li {
    float: left;
    width: 400px;
}

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

Answer 2

这就是你需要的。

HTML：

<nav class="navbar navbar-inverse">
     <div class="container-fluid">          
         <!-- Logo -->
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
             <a href="#" class="navbar-brand">COLLAPSE NAVBAR</a>
         </div>

         <!-- Menu Items -->
         <div class="collapse navbar-collapse" id="mainNavBar">
             <ul class="nav navbar-nav">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
             </ul>  
         </div>

     </div>
 </nav>

CSS：

@media (max-width: 950px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

}

修复引导程序菜单

2 个答案: