在twitter bootstrap 3中缩小到小屏幕尺寸后，内部nav标签div标签显示单独显示

debugcn 发表于 Dev

沙珊斯

我正在尝试使用构建响应式导航栏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>

输出在这里

我从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 */
}

莫伦代克

我用以下代码重新创建了它：

<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 */
}

希望这可以帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-21

我来说两句

0条评论

登录后参与评论

来自分类Dev

标签“显示”事件未触发-Twitter Bootstrap

来自分类Dev

标签“显示”事件未触发-Twitter Bootstrap

来自分类Dev

Twitter Bootstrap标签的最大宽度

来自分类Dev

Twitter Bootstrap标签的最大宽度

来自分类Dev

Twitter Bootstrap轮播导航显示

来自分类Dev

带Twitter Bootstrap的支架显示

来自分类Dev

Twitter Bootstrap Nav下拉位置

来自分类Dev

Twitter Bootstrap 3中的圆桌

来自分类Dev

Twitter Bootstrap（v3）多行标签

来自分类Dev

带标签的Twitter Bootstrap 3内联表单

来自分类Dev

twitter bootstrap覆盖强制在小屏幕上显示新行

来自分类Dev

Twitter-bootstrap：导航栏不显示在小屏幕上

来自分类Dev

Twitter Bootstrap中的多列标签

来自分类Dev

Twitter Bootstrap 3 Glyphicons错误

来自分类Dev

Twitter Bootstrap在XS中打印

来自分类Dev

Twitter Bootstrap中的8列

来自分类Dev

Twitter Bootstrap中不显示背景纹理

来自分类Dev

图像未显示在Twitter Bootstrap模板中

来自分类Dev

highchart 未显示在 django twitter bootstrap 中

来自分类Dev

使用Twitter Bootstrap进行标签导航

来自分类Dev

Twitter Bootstrap 3-图像的“内部”列

来自分类Dev

Twitter Bootstrap不显示装订线

来自分类Dev

Twitter Bootstrap导航栏未按预期显示

来自分类Dev

Twitter Bootstrap下拉菜单未显示

来自分类Dev

Rails Twitter Bootstrap图标未显示

来自分类Dev

Twitter Bootstrap不显示装订线

来自分类常见问题

Bootstrap，Twitter Bootstrap和Bootstrap 3有什么区别？

来自分类Dev

如何使用Twitter Bootstrap 3“包装” div？

来自分类Dev

twitter按钮在twitter-bootstrap导航栏中的位置

Related 相关文章

文章