Bootstrap iPad mini 2021 iPad mini 2021

yv5phkfx 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(189)

我的应用程序中有以下页脚菜单：

<nav class="navbar fixed-bottom navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
    <a class="navbar-brand" href="#">&nbsp;</a>
    <button class="navbar-toggler navbar-toggler-right bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link">Item 1</a></li>
            <li class="nav-item"><a class="nav-link">Item 2</a></li>
            <li class="nav-item"><a class="nav-link">Item 3</a></li>
        </ul>
    </div>
</div>
</nav>

这很好用，但是在像我的iPad Mini 2021这样的iDevice上，“home bar”（设备底部的线条）会与菜单重叠。我想没有home键的iPhone也会出现这种情况。有没有可能在底部给予菜单一些填充/边距（仅在没有home键的设备上）来防止这种情况？

twitter-bootstrap

来源：https://stackoverflow.com/questions/74387536/bootstrap-footer-ipad-mini-2021

1条答案

按热度按时间

ltqd579y1#

<body class="bg-danger">
<nav class="navbar fixed-bottom navbar-expand-sm navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">&nbsp;</a>
        <button class="navbar-toggler navbar-toggler-right bg-light mb-3 mb-md-3 mb-lg-0 <==[if u want margin on icon]" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse mb-3 mb-md-0 mb-lg-0 <==[use it if u want magin on list items] " id="navbarCollapse">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item"><a class="nav-link">Item 1</a></li>
                <li class="nav-item"><a class="nav-link">Item 2</a></li>
                <li class="nav-item"><a class="nav-link">Item 3</a></li>
            </ul>
        </div>
    </div>
    </nav>
</body>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap iPad mini 2021 iPad mini 2021

1条答案

相关问题

热门标签

最新问答