Question

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

第一张图片应该是它的外观
Correct Display
My Display

这是我用代码编写的Snippet代码

<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>

Answer 1

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

<!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>

Bootstrap Navbar崩溃保持水平

1 个答案: