Bootstrap navbar col 在桌面水平而不是垂直堆叠,但在水平垂直堆叠

问题描述 投票:0回答:0

I'm just using a basic bootstrap theme 

https://startbootstrap.com/previews/creative

bootstrap link items mobile expanded
bootstrap link items mobile
desktop basic icons
desktop contact link items container dimensions
mobile basic icons

<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainnav">
<div class="container px-12 px-lg-12">
<a class="navbar-brand" href="#page-top">start bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarresponsive" aria-controls="navbarresponsive" aria-expanded="false" aria-label="toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarresponsive">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link" href="#about">about</a></li>
<li class="nav-item"><a class="nav-link" href="#services">services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">contact</a></li>
</ul>
</div>
</div>
<div class="container px-12 px-lg-12 text-center col-lg-12">
<a class="navbar-brand" href="#" style="width:450px">
<i class="bi bi-telephone"></i>
</a>
<a class="navbar-brand" href="#" style="width:450px">
<i class="bi bi-telephone"></i>
</a>
<a class="navbar-brand" href="#" style="width:450px">
<i class="bi bi-telephone"></i>
</a>
</div>
</nav>

这是我的代码,我认为将新容器放置在带有容器流体的导航类本身中以将项目保留在实际窗口中而不是被推出画布是正确的

我想在导航栏中添加第二行项目,并假设如果我将宽度设置为 12,它将自动缩进并让它们在桌面和移动设备中垂直堆叠。

然而,虽然它非常巧妙地用于移动设备,但对于“桌面”,它将窗口分成两半,就好像它是 6 和 6 宽度,具有完整的跨度。

html css twitter-bootstrap bootstrap-5 nav
© www.soinside.com 2019 - 2024. All rights reserved.