3列網格導航欄引導

我想創建一個3列網格導航欄，我嘗試使用內置到引導但沒有成功的列。3列網格導航欄引導

第一列需要具有100像素一最大寬度，但也可以是流體，如果瀏覽器的尺寸重新調整

第二列需要第一和第二柱之間的間隙是填充和是如果瀏覽器重新調整大小，也會有流暢的反應。

第三列需要具有200像素一個最大寬度，但也可以是液體，如果瀏覽器的尺寸重新調整

我無法與對方取得列直列，我的繼承人小提琴：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; 
}

這裏就是我試圖複製：

navbar

來源

2014-06-27 JT1

你可以包括不同的斷點的圖像呢？ – Aibrean

我改變了上面的圖片來反映我想要達到的目標。 – JT1

https://www.bootply.com/mQh8DyRfWY – ymakux

大於768px的問候你好。你可以使用類似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; 
}

它使用簡單的浮體來實現流體中心。但在較小的屏幕上需要移動元素時，所以也許不得不使用菜單是一個好主意，所以當屏幕小於768時，它將切換到另一個屏幕。

來源

2014-06-27 22:00:00

Bootstrap支持隱藏和顯示基於屏幕寬度的網格圖塊。考慮使用visible-*-block作爲解決您的問題的一種方法。請考慮以下小提琴：

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

它使用下面的設計模式：

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

來源

2014-11-07 16:53:15

3列網格導航欄引導

回答

相關問題