Wie man bootstrap navbar in der Breite kleiner macht?

Question

Ich möchte bootstrap navbar kleiner und halten Sie es richtig, aber kleines Problem hier habe ich einige Daten dynamisch auf der rechten Seite des Rasters geladen, das von Navbar überlappt, so dass ich Navbar Offset um 3 Spalten von rechts halten möchte, so fügte ich CSS hinzu Klasse container-panel um die Breite zu verkleinern und um sie rechts zu halten, habe ich margin-left. Aber auf verschiedenen Pixeln bricht es und navbar überlagert sich mit anderen Elementen. Gibt es eine Reparatur im Bootstrap, um diese Aufgabe zu erfüllen?

main.html

<div class="col-md-10"> 
    <nav class="navbar navbar-default container-panel"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;"> 
       <ul class="nav navbar-nav pull-right"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-file"></span><span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#"><span ng-click="createXml()">Create new BPMN Diagram</span></a></li> 
         </ul> 
        </li> 
        <li><a href="#"><span class="glyphicon glyphicon-folder-open"></span></a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

main.css

.navbar.container-panel { 
    width:554px; 
    margin-left: 760px; 
} 

Answer 1

Verwenden einer variablen Breite, wie VW oder% der Breite in Bezug auf die Bildschirmbreite anzupassen. Möglicherweise müssen Sie den vw oder% an kleineren Haltepunkten anpassen, um den Inhalt der Navigationsleiste nicht zu trennen.

.navbar.container-panel { 
    width:60vw; 
    margin-left: 760px; 
} 

oder

.navbar.container-panel { 
    width:60%; 
    margin-left: 760px; 
}