3 Spaltenraster navbar bootstrap

Question

Ich versuche, eine 3-Spalten-Grid-Navbar zu erstellen, habe ich versucht, mit den Spalten, die in Bootstrap eingebaut sind, aber keinen Erfolg haben.

Die erste Spalte braucht eine max-Breite von 100px zu haben, kann aber flüssig sein, wenn der Browser

die zweite Spalte die Füllung sein die Lücke zwischen dem ersten braucht und 2. Spalte Größe neu ist und Auch Flüssigkeit, um zu reagieren, wenn der Browser neu skaliert wird.

Die dritte Spalte braucht eine max-Breite von 200 Pixel zu haben, kann aber flüssig sein, wenn der Browser

Größe neu ist

ich nicht in der Lage bin, die Spalten inline miteinander, here meine Fiddle zu bekommen: http://jsfiddle.net/Xsfvw/7/

<!--Bootstrap Approach--> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-8 col-sm-3 border">Logo</div> 
     <div class="col-xs-2 col-sm-6 border">Nav</div> 
     <div class="col-xs-2 col-sm-3 border">Right</div> 
    </div> 
</div> 
<!--Standard CSS Approach--> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="nalogo">Logo</div> 
     <div class="nanav">Nav</div> 
     <div class="naright">right</div> 
    </div> 
</div> 

CSS:

.border { 
    border: 2px solid #ff0000; 
    z-index: 1020; 
    height: 50px; 
    margin-bottom: 30px; 
} 
.nalogo { 
    width:100px; 
    height:50px; 
    background-color:#ff0000; 
    border: 1px solid #000; 
    float: left; 
} 
.nanav { 
    width:100%; 
    height:50px; 
    background-color:#00ff00; 
    border: 1px solid #000; 
    margin:0 auto !important; 
} 
.naright { 
    display: inline-block; 
    width:200px; 
    height:50px; 
    background-color:#0000ff; 
    border: 1px solid #000; 
    float: right; 
} 

Hier ist, was ich zu replizieren versuchen:

Answer 1

Hallo für die größer als 768px. Sie könnten etwas wie this verwenden.

.container-fluid { 
    width: 100%; 
    background: #222; 
} 
.row { 
    width: 100%; 
} 
.row > div { 
    color: #FFF; 
} 
.nalogo { 
    float: left; 
    width: 150px; 
    background: red; 
} 
.nanav { 
} 
.naright { 
    float: right; 
    width: 200px; 
    background: blue; 
} 

Es verwendet einfache Schwimmer, um ein flüssiges Zentrum zu erreichen. , aber wenn Sie auf einem kleineren Bildschirm sind, müssen Sie sich um die Elemente bewegen, also wäre es vielleicht eine gute Idee, Menüs zu haben, wenn also der Bildschirm kleiner als 768 ist, schaltet er auf den anderen um.

Answer 2

Bootstrap unterstützt das Ausblenden und Anzeigen von Gitterkacheln basierend auf der Breite des Bildschirms. Erwägen Sie die Verwendung von visible-*-block als Möglichkeit, Ihr Problem zu beheben. Bitte beachten Sie folgende Geige:

http://jsfiddle.net/Xsfvw/10/

Es nutzt die folgenden Design-Muster:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-2 visible-xs-block border">Nav</div> 
     <div class="col-xs-8 visible-xs-block border">Logo XS</div> 
     <div class="col-xs-2 visible-xs-block border">Right</div> 
     <div class="col-sm-3 visible-sm-block visible-md-block border">Logo SM</div> 
     <div class="col-sm-6 visible-sm-block visible-md-block border">Nav </div> 
     <div class="col-sm-3 visible-sm-block visible-md-block border">Right</div> 
    </div> 
</div>