html - 我如何将引导程序 4 下拉菜单向左对齐并展开到全长

Question

在上面的代码中，我试图将下拉菜单与左对齐并全宽对齐，因为我尝试了不同的措施来解决它，方法是添加下拉菜单左或拉左似乎对我不起作用，我希望它工作我们可以在poorishaadi.com 中看到以下下拉列表，但无法修复它，如果有人可以帮助我使用简单的引导程序来处理此代码，那就太好了。

.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>

标签： htmlcssbootstrap-4

Answer 1

您需要为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>

这也是一个小提琴（看到它在行动）。