在 Twitter bootstrap 中缩小到小屏幕尺寸后，导航标签内部 div 标签显示为单独的 bootstrap 3

Question

我正在尝试使用 Twitter Bootstrap 3 构建响应式导航栏。现在我正在使用 Bootstrap 构建导航栏，同时我将在我的导航栏内单独显示小屏幕 2 <div>。这是我的代码

 <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <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-collapse" aria-expanded="false">
                    <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="#">
                    Brand Name
                </a>
            </div>

            <!-- Social Links -->
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-google" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
                    <li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>

and the output is here

我从Twitter Bootstrap的官方文档中复制了导航栏代码。出了什么问题请有人帮忙。提前致谢

.navbar-default{
font-family: 'Montserrat', sans-serif;
/*background-color: #009999 !important;*/
background: none;
/*border-color: #fff;*/
border: none;
}

.navbar-brand{
margin-top: 16px;
color: transparent !important;
}
.navbar-nav li a{
height: 80px;
line-height: 80px;
padding: 0 25px;
border: none;
}

.navbar-default .navbar-nav>li>a:link{
/*color: #fff;*/
/*    color: #f97400;*/
color: rgba(249, 116, 0, 1); /* color #f97400 */
}

.navbar-default .navbar-nav>li>a:hover{
color: #ff0000;
/*    background-color: #f97400;*/
border-bottom: #f0ad4e solid 4px; /* to show underline in navabar on mouse hover */
}

.navbar-default .navbar-nav>li>a:visited{
color:rgba(240, 173, 78, 1); /* color #f0ad4e */
}

.navbar-default .navbar-toggle{
border-color: #f0ad4e;
margin-top: 25px;
}

li.google a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}

li.twitter a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}

li.facebook a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}

li.whatsapp a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}

li.google a:hover,
li.twitter a:hover,
li.facbook a:hover,
li.whatsapp a:hover{
opacity: .8;
}

@media (max-width: 768px) {
.navbar-default .navbar-nav>li>a{
    width: 100%;
    text-align: center;
    background-color: #fff;
    color: #000 !important;
}
.navbar-default .navbar-nav>li>a:hover{
    color: #ff0000;
    background-color: rgba(249, 116, 0, 1);
    border-bottom: #f0ad4e solid 4px; /* to show underline in navabar on mouse hover */
}
.navbar-brand{
    font-family: 'Montserrat', sans-serif;
    color: #fff !important;
 }
 }

.navbar-collapse{
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}

.navbar-fixed-bottom {
position: relative; /* this can also be static */
}

Answer 1

我用这段代码重新创建了它：

<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
  <style>
    .navbar-default {
      font-family: 'Montserrat', sans-serif;
      /*background-color: #009999 !important;*/
      background: none;
      /*border-color: #fff;*/
      border: none;
    }
    .navbar-brand {
      margin-top: 16px;
      color: transparent !important;
    }
    .navbar-nav li a {
      height: 80px;
      line-height: 80px;
      padding: 0 25px;
      border: none;
    }
    .navbar-default .navbar-nav>li>a:link {
      /*color: #fff;*/
      /*    color: #f97400;*/
      color: rgba(249, 116, 0, 1);
      /* color #f97400 */
    }
    .navbar-default .navbar-nav>li>a:hover {
      color: #ff0000;
      /*    background-color: #f97400;*/
      border-bottom: #f0ad4e solid 4px;
      /* to show underline in navabar on mouse hover */
    }
    .navbar-default .navbar-nav>li>a:visited {
      color: rgba(240, 173, 78, 1);
      /* color #f0ad4e */
    }
    .navbar-default .navbar-toggle {
      border-color: #f0ad4e;
      margin-top: 25px;
    }
    li.google a {
      width: 80px;
      font-size: 1.8em;
      text-align: center;
      box-shadow: none;
    }
    li.twitter a {
      width: 80px;
      font-size: 1.8em;
      text-align: center;
      box-shadow: none;
    }
    li.facebook a {
      width: 80px;
      font-size: 1.8em;
      text-align: center;
      box-shadow: none;
    }
    li.whatsapp a {
      width: 80px;
      font-size: 1.8em;
      text-align: center;
      box-shadow: none;
    }
    li.google a:hover,
    li.twitter a:hover,
    li.facbook a:hover,
    li.whatsapp a:hover {
      opacity: .8;
    }
    @media (max-width: 768px) {
      .navbar-default .navbar-nav>li>a {
        width: 100%;
        text-align: center;
        background-color: #fff;
        color: #000 !important;
      }
      .navbar-default .navbar-nav>li>a:hover {
        color: #ff0000;
        background-color: rgba(249, 116, 0, 1);
        border-bottom: #f0ad4e solid 4px;
        /* to show underline in navabar on mouse hover */
      }
      .navbar-brand {
        font-family: 'Montserrat', sans-serif;
        color: #fff !important;
      }
    }
    .navbar-collapse {
      margin-top: 0px;
      margin-bottom: 0px;
      margin-right: 0px;
      margin-left: 0px;
    }
    .navbar-fixed-bottom {
      position: relative;
      /* this can also be static */
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <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-collapse" aria-expanded="false">
          <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="#">
                    Brand Name
                </a>
      </div>

      <!-- Social Links -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li><a href="#">About</a>
          </li>
          <li><a href="#">Service</a>
          </li>
          <li><a href="#">Contact Us</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
          </li>
          <li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

然后我没有收到错误。有没有可能是另一张图片在背景中？

菜单覆盖在您的页面上，我认为您的菜单项具有透明背景。所以我认为修复正在改变你 CSS

.navbar-nav li a {
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  border: none;
  background-color:#ffffff; /* THE FIX */
}

希望对您有所帮助。

在 Twitter bootstrap 中缩小到小屏幕尺寸后，导航标签内部 div 标签显示为单独的 bootstrap 3

inside nav tag div tags are showing seperate after shrinking to small screen size in twitter bootstrap 3

css

navbar

twitter-bootstrap