时间戳

首页 > 解决方案 > Bootstrap Navbar Collapse 保持水平

html - Bootstrap Navbar Collapse 保持水平

问题描述

折叠菜单仍然存在问题。根据 bootstrap 的设置方式，当它折叠时，它应该进入一个笔直的垂直导航，而不是仍然水平拉伸。它似乎只在最低屏幕尺寸时才垂直正确，即使只在其中一个菜单上正确显示。感谢 Gary 指出并帮助解决按钮和 ID 的第一个问题

第一张图片是它应该看起来的样子
正确的显示
我的显示

这是我在 codely 上发布的代码片段

<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav nav-navbar">
    <li class="nav-item nav-link">
        <a href="tel:1-702-555-5555">
            <img src="image/phone.svg" height="15px" alt="Telephone">&nbsp;&nbsp;&#40;702&#41;555&#45;5555
        </a>
    </li>
    <li class="nav-item nav-link">
        <a href="mailto:mail@mail.com">
            <img src="image/email.svg" height="15px" alt="Email">&nbsp;&nbsp;mail@mail.com
        </a>
    </li>
    <li class="nav-item nav-link" href="#">Premier Face Punching</li>
    <li class="nav-item nav-link">
        <a href="https://www.linkedin.com/company/Stuffnthings/">
            <img src="image/linkedin.png" height="15px">
        </a>
        <a href="https://www.facebook.com/stuffnthings">
            <img src="image/facebook.png" height="15px">
        </a>
        <a href="https://www.twitter.com/stuffnthings">
            <img src="image/twitter.png" height="15px">
        </a>
    </li>
    <li>
        <input class="form-control border-secondary py-2" type="search" value="search">
    </li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav nav-pills">
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Web Design</a>
    <a class="nav-item nav-link" href="#">Graphic Design</a>
    <a class="nav-item nav-link" href="#">About US</a>
    <a class="nav-item nav-link" href="#">Contact US</a>
   </div>
 </div>
</nav>

标签： htmlcsstwitter-bootstrap

解决方案

两个导航栏的目标属性相同。只需替换目标属性，按钮即可用于不同的导航栏。当浏览器的宽度较小时，导航栏似乎变得垂直。

<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>


<body>

<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav-navbar">
    <li class="nav-item nav-link">
        <a href="tel:1-702-555-5555">
            <img src="image/phone.svg" height="15px" alt="Telephone">&nbsp;&nbsp;&#40;702&#41;555&#45;5555
        </a>
    </li>
    <li class="nav-item nav-link">
        <a href="mailto:mail@mail.com">
            <img src="image/email.svg" height="15px" alt="Email">&nbsp;&nbsp;mail@mail.com
        </a>
    </li>
    <li class="nav-item nav-link" href="#">Premier Face Punching</li>
    <li class="nav-item nav-link">
        <a href="https://www.linkedin.com/company/Stuffnthings/">
            <img src="image/linkedin.png" height="15px">
        </a>
        <a href="https://www.facebook.com/stuffnthings">
            <img src="image/facebook.png" height="15px">
        </a>
        <a href="https://www.twitter.com/stuffnthings">
            <img src="image/twitter.png" height="15px">
        </a>
    </li>
    <li>
        <input class="form-control border-secondary py-2" type="search" value="search">
    </li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav-pills">
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Web Design</a>
    <a class="nav-item nav-link" href="#">Graphic Design</a>
    <a class="nav-item nav-link" href="#">About US</a>
    <a class="nav-item nav-link" href="#">Contact US</a>
   </div>
 </div>
</nav>


</body>


</html>

推荐阅读