我如何将bootstrap 4下拉菜单向左对齐并扩展到全长

Question

在上面的代码中，由于我尝试通过添加dropdown-menu-left或pull-left by来尝试解决不同的问题，因此我尝试将下拉列表与左侧对齐并以全宽对齐，这似乎对我不起作用它可以工作在以下下拉列表中，正如我们在poishishaadi.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>

Answer 1

请查看此解决方案。

当前您的var p = '112233445566'; var regex = /([02468])([02468])/g console.log(p.replace(regex, '$1-$2')); 相对于dropdown-menu。 它应该相对于外部完整宽度nav-item ...

container

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


/* Extra added */

.container {
  position: relative;
}

.nav-item {
  position: static !important;
}

.dropdown-menu {
  width: 100%;
}

Answer 2

只需从"desc"中删除sOrder类。下面是更新的代码：

text-center

<div id="collapsenavbar">

Answer 3

您需要将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（以查看实际情况）。

Answer 4

您需要将相对位置类添加到主要的容器中，然后从 .navbar-nav中删除相对位置。 > li.nav-item.dropdown ，然后将 width：100％添加到 .dropdown> .dropdown-menu ，使其变为全宽。

.navbar-nav > li{
        padding-left:10px;
        padding-right:10px;
        font-size: 15px;
    }
    .navbar-nav > li.nav-item.dropdown {
        position: inherit;
    }
    .dropdown > .dropdown-menu {
        min-width: 570px;
        margin-top: 8px;
        width: 100%;
    }
    .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;
    }
    .nav-wrapper {
        position: relative;
    }
    @media (max-width: 767px) {
        .dropdown-menu.multi-column {
        min-width: 240px !important;
        overflow-x: hidden;
        }
    }

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 

<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white sticky-top ">
    <div class="container nav-wrapper">
      <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>