Question

我试图让我的导航栏背景在所有屏幕上显示为白色。什么可以阻止这种情况发生？我将css更改为！important默认情况下，它只在宽屏上正确显示。我试过在中小屏幕尺寸上添加媒体查询而没有运气。此外，我的菜单正在下降。

＆＃13;

.navbar-default {
    background-color:white  !important;
    border-color: white  !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>
      <a class="navbar-brand" href="#"><img src=".png" alt=""/>&#160;<span class="ms-rteThemeForeColor-1-0 ms-rteFontSize-4 ms-rteFontFace-5"></span></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
        <li><a href="#">site1</a></li>
        <li><a href="#">site2</a></li>
             <li><a href="#">Site 3</a></li>
                  <li><a href="#">Site 4</a></li></ul>
                </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

＆＃13;

Answer 1

执行以下操作 -

添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
使用data-target="#bs-example-navbar-collapse-1"。
请勿使用!important而是使用ID并设置样式。
在bootstrap css之后添加自定义css。

工作代码段

#mynav {
    background-color:white;
    border-color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav id="mynav" class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
      <a class="navbar-brand" href="#"><img src=".png" alt=""/>&#160;<span class="ms-rteThemeForeColor-1-0 ms-rteFontSize-4 ms-rteFontFace-5"></span></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
        <li><a href="#">site1</a></li>
        <li><a href="#">site2</a></li>
             <li><a href="#">Site 3</a></li>
                  <li><a href="#">Site 4</a></li></ul>
                </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

希望这有帮助！

导航栏背景无法正确显示，菜单不会在单击时下拉

1 个答案: