Question

我正在尝试创建一个响应式菜单，我不确定我的导航栏导航功能是否运行良好，这是第一次创建响应式菜单。我创建了类navbar-nav并上传到服务器并进行了检查平板电脑，手机，两者都给出相同的结果，根据设备未更改。please visit the site。等待回答，如何更改以下代码以获得响应式菜单和正确的指导。

<div class="container">
    <div class="navbar navbar-default">
    <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="image/logo.png" alt="Lotus Groups"/>
    Lotus Groups</a>
    </div>
    <ul class="nav navbar-nav" style="float:right"> 
    <li><a href="#">Lotus Construction</a></li>
    <li><a href="#">Lotus Interior</a></li>
    <li><a href="#">Lotus Digital</a></li>
    <li><a href="#">Lotus Property</a></li>
    <li><a href="#">Lotus Site</a></li>
    </ul>
    </div>
    </div>






 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

JsFiddle

public interface ApiInterface {
@GET("collection_listings/{collection_listing_id}/product_ids.json")
Call<IdExample> getProductIds(@Header("Authorization") String 
accessToken, @Path("collection_listing_id") long id);
}

Answer 2

请你也可以发布css，以便我们可以看到类navbar-nav中的内容

编辑：

尝试添加

    <meta name="viewport" content="width=device-width, initial-scale=1">

到标题，如果不起作用，

看一下本教程

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Answer 3

你也可以试试这个：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar navbar-default">
            <div class="container-fluid">
         <!-- 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" aria-expanded="true">
                <span class="sr-only">Menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
                <div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true" style="">
                    <ul class="nav navbar-nav">
                        <li><img href="#"><img src="image/logo.png" alt="Lotus Groups"></li>
                        <li><a href="#">Lotus Construction</a></li>
                        <li><a href="#">Lotus Interior</a></li>
                        <li><a href="#">Lotus Digital</a></li>
                        <li><a href="#">Lotus Property</a></li>
                        <li><a href="#">Lotus Site</a></li>
                    </ul>
                </div>
</div></div>
        </div>


</body>

我将您的图片放在li标签中以将其包含在导航栏中，因此在移动设备上，图片不会在您的不同菜单上显示。带有class =＆＃34; navbar-header＆＃34;的div标签当屏幕变小时，它会在此处取消切换按钮

编辑：我在你的头标记中添加了一行，请添加它。我还删除了你的第一个div类容器。现在应该可以了！

在bootstrap中遇到nav navbar-nav的问题？

3 个答案: