當邊欄顯示時，導航欄中有兩種背景顏色

我製作了一個簡單的頁面，其中有一個navbar的bootstrap和一個側邊欄：JSBin。目前，導航欄的背景顏色爲black。當邊欄顯示時，導航欄中有兩種背景顏色

現在，我要完成如下：

1）當頁面不夠寬，無法顯示側邊欄，我想導航欄的背景顏色是完全black。

2）然而，頁面的寬度足以顯示側邊欄的時候，我想補充工具欄上方導航欄的區域有不同的背景顏色（例如，white）。像以下屏幕截圖一樣，側邊欄上方的區域爲blue，而導航欄的其餘部分爲white。

我試圖在導航欄中添加一個元素<div class="col-sm-3 col-md-3">，但它不起作用。看起來這隻能包含在container或container-fluid中。

有誰知道如何做到這一點？有什麼解決方法嗎？

來源

2017-04-23 SoftTimur

collap se nav側欄打開並關閉漢堡包圖標..我沒有在您的jsbin示例中看到漢堡包圖標。你打算怎麼打開/關閉側邊欄？ –

請參閱JSBin：打開/關閉邊欄完全取決於頁面的寬度。它不像我顯示的屏幕截圖。 – SoftTimur

當寬度很小時，我可以看到側邊欄隱藏並出現一個漢堡包圖標。 –

1）當頁面不夠寬，以顯示側邊欄，我想navbar的背景顏色爲全黑。

您可以將媒體查詢添加到您的身體標記只是包括它的身體後，在CSS

@media (max-width: 768px) { 
    body { 
     background-color: #000; // black color for background 
    } 
    }

2）然而，當頁面的寬度足以顯示側邊欄，我要的區域側欄上方的導航欄具有不同的背景顏色（例如，白色）。像以下屏幕截圖一樣，側邊欄上方的區域爲藍色，而navbar的其餘部分爲白色。

您可以將項目名稱移動到導航欄外並應用其寬度和顏色。

不要忘記添加媒體查詢，使其餘保持白色導航欄中:)

@media (min-width: 768px) { 
    .sidebar { 
     position: fixed; 
     top: 51px; 
     bottom: 0; 
     left: 0; 
     z-index: 1000; 
     display: block; 
     padding: 20px; 
     overflow-x: hidden; 
     overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ 
     background-color: #f5f5f5; 
     border-right: 1px solid #eee; 
    } 
    .navbar-inverse { 
     background-color: #F8F8F8; // background color of navbar 
     border-color: #E7E7E7; // border color of navbar 
    } 
    }

部分，你需要

<div class="col-sm-3 col-md-3" style="background-color: #428bca; border-color: #E7E7E7;"> 
    <a class="navbar-brand" href="#">Project name</a> 
</div>

全部導航欄的

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="col-sm-3 col-md-3" style="background-color: #428bca; border-color: #E7E7E7;"> 
    <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Dashboard</a></li> 
     <li><a href="#">Settings</a></li> 
     <li><a href="#">Profile</a></li> 
     <li><a href="#">Help</a></li> 
     </ul> 
     <form class="navbar-form navbar-right"> 
     <input type="text" class="form-control" placeholder="Search..."> 
     </form> 
    </div> 
    </div> 
</nav>

這裏是JSBin

來源

2017-04-23 04:49:04

我不確定你是否理解我的問題...我希望**側邊欄上方的導航欄區域與其他導航欄不同... – SoftTimur

@SoftTimur對不起，誤解了你。將立即修復。 –

@SoftTimur我更新我的答案，檢查它:) –

當邊欄顯示時，導航欄中有兩種背景顏色

回答

相關問題