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

【问题标题】：Collapsed navbar on iPad - weird behaviour on expansioniPad上折叠的导航栏-扩展时的奇怪行为
【发布时间】：2018-06-18 18:54:19
【问题描述】：

我在我的网站上使用 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>

【问题讨论】：

您能提供该网站的链接吗？
kev.rc8.me/index.html
当您在 Ipad 上打开该网站时，您能描述一下该网站到底出了什么问题吗？我看你贴的图片没有问题...
你需要仔细观察。我展开了菜单，菜单的背景是透明的，字体是白色的，出于某种奇怪的原因。
您使用的是哪个版本的 Bootstrap 4？

标签： html css web bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案2】：

您应该首先清理页面的标题。在你的标题中积累各种过时的垃圾并不是一个聪明的主意......

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

附：按照另一个答案中的建议使用 !important 标志总是一个坏主意。使用!important 标志表明您不知道自己在做什么。在这种情况下当然不需要。

在你使用这种东西之前：

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

...您应该了解 Bootstrap 网格和布局。因为那时您会意识到，当您按照预期的方式使用 Bootstrap 时，不再需要任何自定义 css。

【讨论】：