bootstrap navbar con griglia a 3 colonne

Question

Sto provando a creare una barra di navigazione a 3 colonne, ho provato a utilizzare le colonne integrate nel bootstrap ma non hanno avuto successo.

La prima colonna deve avere un max-larghezza 100px, ma può essere fluido se viene ridimensionata

seconda colonna deve essere il riempimento il divario tra il 1 ° e 2 ° colonna ed è il browser anche fluido per rispondere se il browser viene ridimensionato.

La terza colonna deve avere un max-width di 200px, ma può essere fluido se viene ridimensionata il browser

non sono in grado di ottenere le colonne in linea con l'altro, ecco il mio violino: 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; 
} 

Ecco quello che sto cercando di replicare:

Answer 1

Ciao per più di 768px. Potresti usare qualcosa come this.

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

Utilizza semplici galleggianti per realizzare un centro fluido. ma quando si è in uno schermo più piccolo è necessario spostarsi tra gli elementi, quindi forse sarebbe una buona idea avere i menu, quindi quando lo schermo è più piccolo di 768 passa all'altro.

Answer 2

Bootstrap supporta nascondere e mostrare i riquadri della griglia in base alla larghezza dello schermo. Prendi in considerazione l'utilizzo di visible-*-block come metodo per risolvere il tuo problema. Si prega di considerare quanto segue violino:

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

Esso utilizza il seguente modello di progettazione:

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