所以我想为一个大学项目制作一个网站，我需要用引导程序做一个导航栏。问题是，当我向导航栏添加新的 nav-item 元素时，它们在 Y 轴上一个下一个对齐，并且我想水平对齐它们这就是我到现在为止所拥有的<!DOCTYPE html><html dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <nav class="navbar sticky-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Home Page</a> <ul class="nav navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Item One</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item Two</a> </li> </ul> </nav> </body></html>这就是项目的显示方式。如何将“项目一”与“项目一”对齐？和“项目二”水平的？
1 回答
蛊毒传说
TA贡献1895条经验 获得超3个赞
根据 Bootstrap 文档，您必须指定包装< i=4>：
导航栏需要使用 .navbar-expand{-sm|-md|-lg|-xl} 来包装 .navbar，以实现响应式折叠和配色方案类。
只需将其添加到您的<nav>项目中即可：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Home Page</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item One</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item Two</a>
</li>
</ul>
</nav>
- 1 回答
- 0 关注
- 48 浏览
添加回答
举报
0/150
提交
取消