Fix Bootstrap-Menü

Question

ich einige Probleme mit Bootstrap-Menü in einigen Bildschirmen mit denen es nicht wie Bildschirme in den anderen zentriert ist, wie Sie here

sehen kann ich navbar-rechts entfernt haben, aber es hat nicht funktioniert. Und ich habe keine spezielle CSS-Änderung. Nur etwas Schriftgröße und Farben.

<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> 

Irgendwelche Vorschläge, es zu beheben?

Answer 1

Lassen Sie sich in menu-nav padding los und Sie sind alle gesetzt:

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

Für andere Probleme auf dem iPad Ansicht, weisen Breite auf Ihre schwebten Punkte und zum Ändern Menü:

@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

Dies ist was du brauchst.

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

}