3 sütun kılavuz navbar önyükleme

Question

3 sütun ızgara navbar oluşturmaya çalışıyorum, önyükleme içinde yerleşik olan ancak hiçbir başarıya sahip olmayan sütunları kullanmayı denedim.

ilk sütun 100 piksel maksimum genişliğinin sahip olması gerekir, ancak tarayıcı yeniden ölçekli olması durumunda, ikinci sütun 1 ve 2 sütun arasındaki boşluk doldurma için ihtiyaç vardır ve

sıvı olabilir Ayrıca tarayıcı yeniden boyutlandırılırsa tepki vermek için de sıvı.

üçüncü sütun 200px bir max-width olması gerekir, ancak tarayıcı yeniden boy ise

Ben birbirleriyle satır içi sütunları alamıyor

heres benim Fiddle akışkan olabilir: 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:

:

İşte

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

i çoğaltmak için çalışıyorum budur

Answer 1

768 pikselden büyük için merhaba. this gibi bir şey kullanabilirsiniz.

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

Sıvı merkezini gerçekleştirmek için basit şamandıralar kullanır. fakat daha küçük ekranlarda öğelerin etrafında dolaşmanız gerektiğinde, bu nedenle menülere sahip olmak iyi bir fikir olabilir, bu nedenle ekran 768'den küçük olduğunda diğerine geçer.

Answer 2

Bootstrap, ekranın genişliğine göre ızgara karolarını saklamayı ve göstermeyi destekler. Sorununuzu çözmek için visible-*-block'u kullanmayı düşünün.

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

Aşağıdaki tasarım deseni kullanır:

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