BootStrap小型設備，切換菜單背景色

Question

圖像可顯示100多個字。

因此，我正在嘗試為小型設備獲取導航欄下拉菜單的背景信息（請參閱下面的圖像）。 另外，我沒有使用Bootstrap默認主題CSS文件。 請注意，僅當設備太小而無法查看網站的完整導航欄時，才使用此功能。

請注意，我正在使用FontAwesome提供圖標！

HTML：

    <div class="body-top-padding">
<nav class="navbar navbar-fixed-top container marginaali" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">(Valinnat)</span>
                <i class="fa fa-bars valikko-icon-vari" aria-hidden="true" id="menuIconColor"></i>
            </button>
            <span class="logo"></span>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav pull-right menuValikkoYksi">
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
</div>

CSS：

@charset "UTF-8";
.menuValikkoYksi {
  margin-right: 20%;
}
html, body {
  height: 100%;
}
.navbar-toggle {
  background-color: #00f;
}

.carousel-control.left, .carousel-control.right {
  background-image: none;
}
.item, .active, .carousel-inner {
  height: 100%;
}
.body-top-padding {
  padding-top: 115px;
}
.marginaali {
  margin-top: 25px;
  -webkit-background-size: cover;
  background-size: cover;
}
.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.karuselli-ico {
  color: #202020;
}
.logo {
  margin-left: 45px;
  background-image: url(/public/images/logo-min.gif);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 90px;
  height: 64px;
}
#menuIconColor {
  color: #fff;
}

Answer 1

您應該將navbar-default類設置為navbar ，或者您可以使用以下CSS自行設置背景顏色：

.navbar {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

Answer 2

有不同的方法可以執行，如果要在特定寬度上執行，請使用： 媒體查詢 。

使用以下代碼：

@media(max-width:420px){
.nav{
background-color: #ccc;
border-color: #000;
}
}