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

BootStrap小型设备，切换菜单背景颜色

2 个答案: