gpt4 book ai didi

html - Bootstrap 居中响应式垂直导航栏

转载 作者:太空宇宙 更新时间:2023-11-03 18:45:49 24 4
gpt4 key购买 nike

在实现我想要的响应式 Bootstrap 导航栏样式时遇到了一些麻烦。

我对 bootstrap/css 和 jsfiddle 还很陌生 http://jsfiddle.net/YfmwV/到目前为止,我已经一起破解了。

<div class="navbar">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a>

</li>
<li><a href="#">Showtime</a>

</li>
<li><a href="#">Motivation</a>

</li>
<li><a href="#">About</a>

</li>
<li><a href="#">Testimonials</a>

</li>
<li><a href="#">Gallery</a>

</li>
<li><a href="#">Merchandise</a>

</li>
<li><a href="#">Contact</a>

</li>
</ul>
</div>
</div>
</div>

问题与以下代码有关,它实现了我在大屏幕 View 中所追求的目标,但在响应模式下完全破坏了菜单。

.navbar .nav>li {
width: 12.5%;
}

我试图让导航栏元素占据导航栏的整个空间,而不是左对齐或右对齐,我能想到的唯一方法是将宽度设置为百分比,这是不理想。

如果有人能给我指出正确的方向,那就太棒了。

最佳答案

您可以使用 @media 查询,这样您的 width:12.5% 仅适用于桌面模式..

CSS

@media (min-width: 979px) {
.navbar .nav>li {
width: 12.5%;
}
}

演示:https://www.bootply.com/wauacskYQj

关于html - Bootstrap 居中响应式垂直导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16419806/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com