Bootstrap 4 带列的引导5导航栏。。右上的下拉菜单jumpy
我正在尝试一个引导5测试版1的导航栏 代码如下：Bootstrap 4 带列的引导5导航栏。。右上的下拉菜单jumpy,bootstrap-4,flexbox,bootstrap-5,Bootstrap 4,Flexbox,Bootstrap 5,我正在尝试一个引导5测试版1的导航栏 代码如下： <nav class="navbar navbar-light bg-light"> <a href="" class="navbar-brand">Logo</a> <div class="col" style="background-color: grey;">column 1</d
<nav class="navbar navbar-light bg-light">
<a href="" class="navbar-brand">Logo</a>
<div class="col" style="background-color: grey;">column 1</div>
<div class="col" style="background-color: red;">column 2</div>
<div class="col" style="background-color: green;">column 3</div>
<div class="col" style="background-color: purple; border:1px solid yellow">column 4</div>
<ul class="navbar-nav me-auto" style="background-color: green;">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle dropdown-menu-left" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</nav>
第1栏
第2栏
第3栏
第4栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 w-100">
<li class="nav-item flex-fill">
<a
class="nav-link active"
style="background-color: grey;"
aria-current="page"
href="#"
>Column 1</a
>
</li>
<li class="nav-item flex-fill">
<a class="nav-link" href="#" style="background-color: red;"
>Column 2</a
>
</li>
<li class="nav-item flex-fill">
<a class="nav-link" href="#" style="background-color: green;"
>Column 3</a
>
</li>
<li class="nav-item flex-fill">
<a
class="nav-link"
href="#"
style="background-color: purple; border: 1px solid yellow;"
>Column 4</a
>
</li>
<li
class="nav-item dropdown flex-fill"
style="background-color: green;"
>
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
静态模板
-
-
现在，下拉菜单可以正常工作，列也可以像您的例子一样跨行。我已经使用了flex-fill类来跨越列，或者您可以使用
flex-grow:1