Question

所以＆＃34;汉堡＆＃34;在我将页面折叠到它应该出现的点之后，切换导航栏图标似乎是不可见的。 3个图标栏和实际按钮都是不可见的。但是，它似乎仍然有效，因为它在点击时会下降。我使用＆＃39; Inspect Element＆＃39;来完成了影响它的风格。在谷歌浏览器中运行，切换和更改多种样式都无济于事。

任何人都可以帮助我理解为什么要这样做吗？

enter image description here

这是一张说明问题的图片，以及我的代码：

<style>

    /*body {
      background-color: #c0c0c0;
    }*/

    @media (max-width: 767px) {

    }

    @media (min-width: 768px) {
      /*.navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: fixed;
        float:none;
      }*/

      body {

      }

      .navbar-nav > li {
        border-left: 1px solid;
      }

      .navbar {
        border-radius-bottom-left: 5px;
        border-radius-bottom-right: 5px;
       /* background-color: #99ccff;*/
        width: 100%;
      }

      .nav>li>a:hover, .nav>li>a:focus {
        /*background-color: #eee !important;*/
      }
    }
    .navbar {
     /* background-color: #99ccff; */
      border: 1px solid; 
    }


    </style>

    <title> Bootstrap Testing </title>
  </head>
  <body role = "document">

  <div class = "row-fluid">
    <div class = "col-lg-9">
      <img src = "pics/edviewrateBanner.png">
    </div>

    <div class = "col-lg-3">
      <button type="button" class="btn btn-lg btn-primary visible-lg">Sign In</button>
    </div>
  </div>

  <div class = "row-fluid">
     <div class = "col-lg-3 col-lg-offset-9 hidden-xs">
      <button type="button" class="btn btn-lg btn-primary" style = "visibility: hidden;">ButtonToTakeUpSpace</button>
    </div>
  </div>

  <div class = "row-fluid">
    <div class = "col-lg-12">
      <nav class = "navbar" role =  "navigation">
         <div class = "container-fluid">

          <div class = "navbar-header">
            <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#mainNavbarInfo">
              <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 visible-xs visible-sm" href = "#"> EdViewRate</a>
          </div>

          <!-- Begin Navbar items -->
          <div class = "collapse navbar-collapse" id = "mainNavbarInfo">
            <ul class = "nav navbar-nav navbar-right">
              <li class = "active"><a href = "#"><span class = "glyphicon glyphicon-home"></span> Home </a> </li>
              <li><a href = "#"><span class = "glyphicon glyphicon-list-alt"></span> SLO Generator </a> </li>
              <li><a href = "#"><span class = "glyphicon glyphicon-question-sign"></span> SLO Tutorial </a> </li>
              <li><a href = "#"><span class = "glyphicon glyphicon-cloud-upload"></span> Sign up  </a></li>

            <li class = "dropdown visible-xs visible-sm visible-md">
              <a class = "dropdown-toggle" href = "#" data-toggle="dropdown"><span class = "glyphicon glyphicon-share-alt"></span> Sign In <strong class = "caret"></strong></a>
              <div class = "dropdown-menu" style = "padding: 15px; padding-bottom: 10px;">
                  <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
                    <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
                    <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
                    <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
                    <label class="string optional" for="user_remember_me"> Remember me</label>

                    <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
                  </form>
              </div>
            </li>
          </ul>

          </div>

        </div>
      </nav>
    </div>
  </div>

Answer 1

问题是你还没有指定＆＃34;主题＆＃34;用于导航栏。您必须拥有navbar-default或navbar-inverse课程以及navbar元素上的nav课程。

http://jsfiddle.net/65KdX/1/

在执行此操作时，navbar-toggle所显示的所有Bootstrap CSS都将border-color #ddd应用于navbar-default。你可以省略navbar课程，但是没有人知道你可能会遇到{{1}}的其他造型问题。最好应用该课程，然后覆盖您不想要/不需要的具体内容。

为什么我的Bootstrap Toggle Navbar消失了？

1 个答案: