iPhone上的正文内容Bootstrap 4导航

Question

这是我的导航代码：

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" role="navigation">
    <div class="container">

        <a class="navbar-brand" href="/">
            <img width="150" height="60" src="/image-files/logo-gerard.svg" alt="Gerard">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav ml-auto">

                <li>...</li>

            </ul>
        </div>
    </div>
</nav>

这是我的CSS：

body{ 
    padding-top: 70px; 
}

它在台式电脑上运行良好。但是在我的iPhone（IOS，Safari浏览器）上我遇到了问题，因为导航与正文内容重叠。看起来CSS中的body padding-top设置被忽略（无论我输入什么数字，都没有变化）。

任何人都知道我做错了什么？这是一个错误吗？

以下是实例：http://gerard.xn--reitve-ckb.si/

Answer 1

你需要添加和工作bootstrap.js代码以便在任何分辨率下显示

Answer 2

它重叠在所有类型的设备上，而不仅仅是iPhone上。要解决此问题，请增加正文的padding-top

height的{​​{1}} nav为70px，并且8px填充了顶部和底部。您需要将padding-top的{​​{1}}设置为body。我建议您将其设置为86px = (70 + (2 * 8 ))。 90px无法发挥重要作用。

更新

在图片中不会忽略填充。它按预期工作。