Question

我在我的网站上使用Bootstrap。其中一个是导航栏。它在台式机，iPhone等上工作正常，但在我的iPad上它看起来像这样（透明背景和白色字体）：

我做错了什么？

我没有使用任何CSS，所以它都是Bootstrap的。

<nav class="navbar sticky-top navbar-toggleable-md navbar-inverse bg-inverse">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="index.html">Kev's Kitchen</a>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Home </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
                    </li>
                   <li class="nav-item">
                        <a class="nav-link" href="meetTheChef.html">Meet the Chef</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>

Answer 1

我看到了问题。只需添加 .navbar {display: block !important;} 到您的CSS

Answer 2

您应首先清理页面标题。在标题中累积各种过时的垃圾并不是一个明智的想法......

下一步是删除app.css文件的所有内容，并开始使用本机Bootstrap类来实现您想要的而不是手动覆盖所有内容。本机Bootstrap类可以完成您所需要的所有内容。

P.S。使用另一个答案中建议的!important标志总是一个坏主意。使用!important标记表明您不知道自己在做什么。在这种情况下肯定不需要。

在你使用这种东西之前：

＆＃13;

    .container-fluid {
        margin: 0;
        padding: 0;
    }

＆＃13;

...您应该了解Bootstrap网格和布局。因为那时你会意识到，当你使用Bootstrap时，它的使用方式不再是那种自定义css了。

iPad上折叠的导航栏 - 扩展时的奇怪行为

2 个答案: