Bootstrap 导航栏两个或多个项目对齐
所以我想为一个大学项目制作一个网站，我需要用引导程序做一个导航栏。问题是，当我向导航栏添加新的 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回答
-
蛊毒传说
根据 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>
随时随地看视频慕课网APP
相关分类
Html5