Question

我创建了一个带有bootstrap 3的响应式菜单。所以它在桌面上工作，但它不适用于移动设备。

这是我的代码

<div class="row">
            <div class="navbar navbar-inveren navbar-fixed-top" style="background-color: rgb(192, 12, 26) !important;">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse pull-right">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="top_menu"><a style="color: whitesmoke; font-family: 'myfont';" href="/Pages/Contact.aspx">تماس با ما</a></li>
                        <li class="top_menu"><a style="color: whitesmoke; font-family: 'myfont';" href="/Pages/Items.aspx">شرایط و راهنما</a></li>
                        <li class="top_menu"><a style="color: whitesmoke; font-family: 'myfont';" href="/Pages/About.aspx">درباره ما</a></li>
                        <li class="top_menu"><a style="color: whitesmoke; font-family: 'myfont';" href="/login/Login.aspx">ورود به حساب کاربری</a></li>
                        <li class="top_menu"><a style="color: whitesmoke; font-family: 'myfont';" href="/Pages/MySangyar.aspx">سنگیار من</a></li>
                        <li class="top_menu"><a style="color: whitesmoke; font-family: 'myfont';" href="../default.aspx">صفحه نخست</a></li>
                        <li class="top_menu">
                            <a title="خروج از پنل کاربری" class="navbar-brand" href="/Default.aspx">
                                <img style="width: 60px; height: 40px;" class="img-responsive img-circle" src="/Images/logo.png" alt="عکسی وجود ندارد" />
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

桌面全屏

： enter image description here

在桌面上，当它的大小为700像素时： enter image description here

当我加载Galaxy S5时，它会像第一张图片一样加载，而我想像第二张图片一样显示。

请帮帮我......

非常感谢

Answer 1

在代码的meta标记内添加此head代码：

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

我的自适应导航栏无法在移动设备上运行

1 个答案: