gpt4 book ai didi

html - Bootstrap 导航栏未对齐的下拉菜单

转载 作者:行者123 更新时间:2023-11-28 16:31:03 25 4
gpt4 key购买 nike

我有一个带有几个下拉菜单的导航栏。它们已被修改为使用一个容器来显示 4 列下拉内容

enter image description here enter image description here

请注意,对于导航栏上的每个下拉菜单,下拉菜单都没有与容器(灰色区域)对齐。我想让所有下拉菜单与容器对齐。

我试过绝对定位,但效果不是很好,我想知道是否有更好的 Bootstrap 方式来实现它?

代码:

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button" aria-haspopup="true"
aria-expanded="false">
Dropdown 1 <span class="caret"></span>
</a>
<div class="dropdown-menu">
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul class="list-unstyled">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Dropdown 1 <span class="caret"></span>
</a>
<div class="dropdown-menu">
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul class="list-unstyled">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

最佳答案

每个你的dropdown-menu包含 <div class="container">已修复 width对应于屏幕尺寸。

您应该手动设置容器宽度:<div class="container" style="width:...">

或者为每个屏幕尺寸创建 css 类 <div class="container custom-width"> :

@media (min-width: 768px) {
.custom-width {
width: ... !important;
}
}
@media (min-width: 992px) {
.custom-width {
width: ... !important;
}
}
@media (min-width: 1200px) {
.custom-width {
width: ... !important;
}
}

关于html - Bootstrap 导航栏未对齐的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35310178/

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