Question

我无法让我的代码在移动设备上运行。我希望导航栏显示为可折叠标签，并且它不会以这种方式显示。我不确定这是因为自定义样式还是导航栏中缺少或添加了某些内容。我添加了徽标，因为我不确定这是否会导致缺少导航栏。提前致谢。

    </div>
    <div class="logo">
    <p><a href="index.html">Title Here</a></p>
    </div>
    <!-- Navigation -->
    <nav class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                    <li>
                        <a href="bio.html">Bio</a>
                    </li>
                    <li>
                        <a href="lessons.html">Lessons</a>
                    </li>
                    <li>
                        <a href="shows.html">Shows</a>
                    </li>
                    <li>
                        <a href="music.html">Music</a>
                    </li>
                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
<pre> and this is the customstyle.css</pre>
    .navbar .navbar-nav {
    position:absolute;
    display: inline-block;
    left:33%;
    margin-top: 7%;
    }

    .navbar li a {
    color:#000000;
    font-size: 15px;
    }
    .navbar li a:focus, .navbar li a:hover{
    -webkit-transition:1s;
    }
    .logo{
    display:inline-block;
    position: absolute;
    left:40%;
    font-size: 20px;

    font: 80px "munich", Sans-serf, Ariel;
    margin: 20px;
    }

    .logo a:focus, .logo a:hover{
     -webkit-transition:1s;
     color:#999999;
     text-decoration: none;
     }
     .logo li a:focus, .logo li a:hover{
     -webkit-transition:1s;
     color:#000000;
     }

Answer 1

按钮显示只是可以将navbar-default类添加到您的导航元素中。

要点击下拉列表，您还需要添加bootstrap.js文件，该文件需要jquery我已将其包含在示例中，以便您可以看到它的实际效果。

Example

代码：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

我发现你的徽标位于导航所需的导航范围之外，无法正确显示

像这样：

<div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
              <a class="navbar-brand" href="#">Project name</a>
</div>

我的导航栏未显示在移动设备上

1 个答案: