将引导栏4转换为导航栏5

Question

想要将导航栏的引导栏4转换为引导栏5

我找到了这个代码https://codepen.io/metismiao/pen/bQBoyw这对我来说很好，但它是与bootstrap 4但我使用bootstrap 5，我试图转换它，但我有一些问题

.navbar-brand{
padding-top: 0;
}
@media(min-width:768px)
{

.navbar-first-row{
height:50px;
background-color:B5428E;
}

.navbar-top-left{
position:absolute;
top:0px;
left:0px;
background-color:42B55B;
}
.navbar-top-right{
position:absolute;
top:0px;
right:15px;
background-color:E82985;
}
.navbar-bottom-left{
background-color:A5B60C;
}
}
<nav class="navbar navbar-default">
<div class="navbar-first-row"></div>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/128x50"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="collapse">

<ul class="nav navbar-nav navbar-top-left">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li> 
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
<ul class="nav navbar-nav navbar-bottom-left">
<li><a href="#">1-800-233-1111</a></li>
<li><a href="#">[e-mail]</a></li> 
</ul>

<ul class="nav navbar-nav navbar-bottom-right">
<li><a href="#">Location</a></li>
<li><a href="#"> Login</a></li> 
</ul>


<ul class="nav navbar-nav navbar-right navbar-top-right">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">YouTube</a></li>

<li><a href="#" class="bg-success">Call now </a></li>

</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

这段代码

https://codepen.io/metismiao/pen/bQBoyw

将其转换为bootstrap 5

Answer 1

那个代码依赖者毫无理由地使用绝对定位绝对

"Converting"将旧的引导布局转换为新版本的最佳方法是从头开始创建相同的外观和行为。特别是当旧代码使用一些时髦的方法来实现非常简单的布局时。

如果你阅读了导航栏上的Bootstrap文档，你可以复制其中一个例子来开始。得到"两行";您将navbar-nav包裹在没有填充的container-fluid中，然后是没有沟槽的row，并使用.row-cols-*快速设置columns的数量。

将三个navbar-nav整齐地塞进它们的列中，使用Bootstrap的Flex Utilities类将第二个navbar与.justify-content-end放在一起。

剩下的就是在需要的地方应用正确的breakpoint类，在我的例子中，我使用md。因此，在中间断点处，navbar-navs将很好地堆叠在collapse中。

这就是Bootstrap能帮你做到的。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="container-fluid px-0">
<div class="row g-0 row-cols-md-2">
<div class="col-md navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Disabled</a>
</div>
<div class="col-md d-md-flex justify-content-end navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link bg-success-subtle" href="#">Disabled</a>
</div>
<div class="col-md navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Disabled</a>
</div>
</div>
</div>
</div>
</div>
</nav>