在上面的代码中，我试图将下拉菜单向左对齐并与全宽对齐，因为我尝试了不同的方法来解决它，通过添加 dropdown-menu-left 或 pull-left by 似乎对我不起作用，我想要正如我们在 poorishaadi.com 中看到的那样，它可以在以下下拉菜单中工作，但我无法修复它，如果有人可以帮助我使用简单的 Bootstrap 来处理此代码，那就太好了。
.navbar-nav>li {
padding-left: 10px;
padding-right: 10px;
font-size: 15px;
}
.dropdown>.dropdown-menu {
min-width: 570px;
margin-top: 8px;
}
.multi-column-dropdown {
list-style: none;
margin-left: 20px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: rgb(0, 0, 0);
white-space: normal;
margin-top: 10px;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #f80606;
}
@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white
sticky-top ">
<div class="container">
<a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu multi-column" aria-labelledby="dropdown01">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="caterers.php">Caterers</a></li>
<hr />
<li><a href="decorer.php">Decorator</a></li>
<hr />
<li><a href="dholwale.php">Dhol Wale</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="flowrdecor.php">Flower Decorator</a></li>
<hr />
<li><a href="makeupart.php">Makeup Artist</a></li>
<hr />
<li><a href="mehandi.php">Mehandi Artist</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="photo.php">Photography</a></li>
<hr />
<li><a href="sound.php">Sound & DJ</a></li>
<hr />
<li><a href="Venue_1.php">Venue</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="cards.php">Wedding Cards</a></li>
<hr />
<li><a href="Wedplan.php">Wedding Planner</a></li>
<hr />
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>最佳答案
您需要添加 position-static给你上课 <li>项，然后添加类 w-100到您的下拉菜单，使其全宽。
查看修改后的代码:
<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white sticky-top">
<div class="container">
<a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active position-static">
<a class="nav-link font-weight-bold" href="index.php">Home</a>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu multi-column w-100" aria-labelledby="dropdown01">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="caterers.php">Caterers</a></li>
<hr />
<li><a href="decorer.php">Decorator</a></li>
<hr />
<li><a href="dholwale.php">Dhol Wale</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="flowrdecor.php">Flower Decorator</a></li>
<hr />
<li><a href="makeupart.php">Makeup Artist</a></li>
<hr />
<li><a href="mehandi.php">Mehandi Artist</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="photo.php">Photography</a></li>
<hr />
<li><a href="sound.php">Sound & DJ</a></li>
<hr />
<li><a href="Venue_1.php">Venue</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="cards.php">Wedding Cards</a></li>
<hr />
<li><a href="Wedplan.php">Wedding Planner</a></li>
<hr />
</ul>
</div>
</div>
</div>
</li>
</ul>
这是一个fiddle也是(看到它在行动)。
关于html - 我怎样才能将 bootstrap 4 下拉菜单向左对齐并扩展到全长，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52493580/