Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/sql-server-2005/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Menu 引导中的导航栏导航有问题吗?_Menu_Responsive - Fatal编程技术网

Menu 引导中的导航栏导航有问题吗?

Menu 引导中的导航栏导航有问题吗?,menu,responsive,Menu,Responsive,我正在尝试创建一个响应菜单,我不确定我的导航栏导航功能是否正常工作,这是第一次创建响应菜单。我创建了类导航栏导航并上传到服务器,并与平板电脑、手机进行了检查,根据未更改的设备,两者都给出了相同的结果。。等待回答,如何更改以下代码以获得响应菜单和正确的指导 <div class="container"> <div class="navbar navbar-default"> <div class="container-fluid"> &l

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

<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>


请您也发布css,这样我们就可以看到navbar nav类中的内容了

编辑:

尝试添加

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

如果这不起作用

请看一下本教程


您也可以尝试以下方法:

<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=“navbar header”的div标记用于在屏幕变小时显示切换按钮

编辑: 我在你的头标签上加了一行,请加上。 我还删除了您的第一个div类容器。 现在应该可以了


我正在使用cdn库,有问题的更新和给定的链接,或者请给我上面的响应代码,我是bootstrap的新手,无法进一步移动,请查看我在回答中添加的链接我很抱歉,我读到了,我不确定,我学习和执行正确,所以你会写下并张贴答案,以便我可以更好地了解响应菜单。我想为上述代码编写代码,并立即在线测试,使用手机、平板电脑,再次为上述代码尝试@kondal gavei上传到服务器的答案请检查手机和平板电脑?如果你能编辑你的答案,包括你改变了什么以及你的代码为什么工作的摘要,这将是很有帮助的。我将valentin gachod代码上传到服务器,请检查手机和平板电脑,我们是否正确实现了。我固定在我的脑海像正常的1000px网站(保证金自动)左右两侧,我们需要空间,所以只有我保持我的头这样,但确保它应该在响应模式下工作,现在检查瓦伦丁。您好,valentin,但在移动设备中,由于菜单不是以切换方式出现,请检查Thanks。它现在正在显示,请检查valentin,但它显示在非常靠近左侧的位置,请检查移动设备和平板电脑,如何使其居中您想在按下切换按钮时居中显示菜单吗?
 Bootstrap includes a responsive, mobile first fluid grid system that 
 appropriately scales up to 12 columns as the device or viewport size 
 increases. 
 It includes predefined classes for easy layout options, as well as 
 powerful 
 mixins for generating more semantic layouts.