Question

我创建了一个网页，它在计算机上工作正常，但我注意到当我在手机（iphone）上查看页面时，导航栏丢失了。

这是我的页面代码：

脚本：

$(document).ready(function() {

            $(".content").load("defaultcontent.html");

            $(".about").click(function(e) {
                $(".content").load("about.html");
            });

            $(".home").click(function(e) {
                $(".content").load("defaultcontent.html");
            });

            $(".products").click(function(e) {
                $(".content").load("products.html");
            });

            $(".contact").click(function(e) {
                $(".content").load("contactus.html");
            });

        });

css：

 body {
        background-image:
            url("https://www.airmanchallenge.com/images/backgroundSite.jpg");
        color: white;
    }

    .navbar>a:hover {
    background-color: black;
        color: white;
    }

    .topnav >a:hover {
    background-color: black;
        color: white;
    }

    .content {
        height: 400px;
        overflow-y: auto;
    }

HTML：

<!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample Page</title>
    <link
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript"
        src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript"
        src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript"
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    </head>
    <body>
        <header class="text-center">
            <h1>ABC Store</h1>
            <p>some description</p>
        </header>

        <nav role="navigation" class="navbar navbar-default"  >
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav topnav">
            <li><a class="home">Home</a></li>
            <li><a class="products">Products</a></li>
            <li><a class="contact">Contact</a></li>
            <li><a class="about">About</a></li>
        </ul>
    </div>
</nav>

        <div class="container">
            <div class="row">
                <span>
                    <div class="row-sm-12 row-md-12 row-lg-12 content"
                        style="background-color: lightblue;"></div>
                </span>
            </div>
        </div>

        <footer class="text-center"> &#169; ABC Group. All Rights
            Reserved </footer>
    </body>
    </html>

我应该在html div中添加什么才能在手机上显示导航栏？我已在http://sampledreamstore.000webhostapp.com上托管了我的网页。

由于

Answer 1

您缺少bootstrap中的导航栏按钮。

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
    </button>
    <a class="navbar-brand" href="#">ABC Store</a>
</div>

以下是使用代码的示例

 <nav role="navigation" class="navbar navbar-default"  >
      <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
           </button>
           <a class="navbar-brand" href="#">ABC Store</a>
      </div>
      <!-- Collection of nav links and other content for toggling -->
      <div id="navbarCollapse" class="collapse navbar-collapse">
           <ul class="nav navbar-nav topnav">
                <li><a class="home">Home</a></li>
                <li><a class="products">Products</a></li>
                <li><a class="contact">Contact</a></li>
                <li><a class="about">About</a></li>
           </ul>
      </div>
 </nav>

移动设备上缺少Bootstrap导航栏

1 个答案: