导航条未正确堆叠
导航条未正确堆叠
提问于 2020-04-21 10:05:32
在超小型屏幕中，我想让导航条品牌和导航器垂直叠加。
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>但出于某种原因，它看起来像这样
我怎样才能让肚脐导航在一个超小型屏幕肚脐品牌下？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-21 10:11:01
使用.collapse类和按钮切换器。
更新
只需在flex-column flex-lg-row标记中添加nav类即可。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light flex-column flex-lg-row">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Stack Overflow用户
发布于 2020-04-21 10:38:54
您希望导航项也垂直堆叠吗？我觉得你在找这个..。
<nav class="navbar navbar-dark navbar-expand bg-primary fixed-top">
<div class="container flex-column flex-sm-row">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-sm-auto mr-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61340905
复制相关文章
相似问题
腾讯云开发者
