Question

这是 JsFiddle ：

HTML：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div data-role="page" data-theme="b" id="home">
    <div class="wrapper">
        <div data-role="tabs">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#fragment-1" class="ui-btn-active">test 1</a></li>
                        <li><a href="#fragment-2"> test 2</a></li>
                    </ul>
                </div>
                <div id="fragment-1">
                    test1
                </div>

                <div id="fragment-2">
                    test2
                 </div>
        </div>     
    </div>
</div>

CSS：

.wrapper {
    margin: 0 auto;
    max-width: 600px;
    font-size: 12pt;
}

它在JsFiddle上运作良好。但在我的页面中，它是这样的：

enter image description here

而不是：

enter image description here

你知道这可能是什么问题吗？

它是ASP.NET MVC网站。我的布局：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        @Styles.Render("~/Content/css")
    </head>
    <body>
        @RenderBody()
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jquerymobile")
        @RenderSection("scripts", required: false)
    </body>
</html>

我的其他页面中的JQuery Mobile没有问题......

Answer 1

是的，您需要删除ul：

的边距和列表样式

[data-role="navbar"] ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Jquery移动导航栏无法正常显示

1 个答案: