Bootstrap 4中心导航下拉

我正在使用bootstrap 4创建一个导航菜单。我的导航项目都包含一个下拉菜单。当点击时,我希望这个菜单显示相同的大小,并在页面上水平居中。理想情况下,我希望这个下拉菜单的大小与ul元素相同。目前我还不知道怎么做,因为我对bootstrap比较陌生。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
  <div class="container h-100">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse h-100" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto mx-auto h-100">
        <li class="nav-item dropdown px-2">
          <a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Flat Roofing
                    </a>
          <div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown">
            <div class="container">
              <div class="row">
                <div class="col-md-4">
                  <a class="dropdown-item text-primary" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
                  <a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
                  <a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
                  <a class="dropdown-item" href="/category/duoply">Duoply</a>
                  <a class="dropdown-item text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
                  <a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
                  <a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
                  <a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
                  <a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
                  <a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
                  <a class="dropdown-item text-primary" href="/category/torch-on-felt">Roofing Felt</a>
                  <a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
                  <a class="dropdown-item text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
                  <a class="dropdown-item" href="/category/osb">OSB</a>
                </div>
                <div class="col-md-4">
                  <a class="dropdown-item text-primary" href="/category/green-roofing">Green Roof System</a>
                  <a class="dropdown-item" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
                  <a class="dropdown-item text-primary" href="/category/liquid-waterproofing-systems">Liquid Waterproofing</a>
                  <a class="dropdown-item" href="/category/elastathane">Elastathane 25</a>
                  <a class="dropdown-item" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
                  <a class="dropdown-item" href="/tools/flexitec-calculator">Liquid Rubber</a>
                  <a class="dropdown-item text-primary" href="#">Skylights</a>
                  <a class="dropdown-item" href="#">Flat Glass Rooflights</a>
                  <a class="dropdown-item" href="#">Domes</a>
                  <a class="dropdown-item text-primary" href="#">Flat Roof Outlets</a>
                  <a class="dropdown-item" href="/category/flat-roof-outlets">Water Outlets</a>
                  <a class="dropdown-item" href="/category/flat-roof-vents">Flat Roof Vents</a>
                </div>
                <div class="col-md-4">
                  <a class="dropdown-item navbar-brand text-primary h5" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
                  <a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
                  <a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
                  <a class="dropdown-item" href="/category/duoply">Duoply</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item navbar-brand text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
                  <a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
                  <a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
                  <a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
                  <a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
                  <a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item navbar-brand text-primary" href="/category/torch-on-felt">Roofing Felt</a>
                  <a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item navbar-brand text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
                  <a class="dropdown-item" href="/category/osb">OSB</a>
                </div>

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


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

目前的行为。

enter image description here

预期的结果,居中,大小相同。

enter image description here

建议修复后的结果。

enter image description here

解决方案:

添加以下CSS。

.dropdown {
    position: initial;
}

@media (min-width: 768px) {
  .dropdown-menu {
      width: 50rem; /* JUST FOR STYLING PURPOSE OF DROPDOWN */
      position: absolute;
      left: 50% !important;
      transform: translateX(-50%) !important;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
  <div class="container h-100">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse h-100" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto mx-auto h-100">
        <li class="nav-item dropdown px-2">
          <a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Flat Roofing
                    </a>
          <div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown">
            <div class="container">
              <div class="row">
                <div class="col-md-4">
                  <a class="dropdown-item text-primary" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
                  <a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
                  <a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
                  <a class="dropdown-item" href="/category/duoply">Duoply</a>
                  <a class="dropdown-item text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
                  <a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
                  <a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
                  <a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
                  <a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
                  <a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
                  <a class="dropdown-item text-primary" href="/category/torch-on-felt">Roofing Felt</a>
                  <a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
                  <a class="dropdown-item text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
                  <a class="dropdown-item" href="/category/osb">OSB</a>
                </div>
                <div class="col-md-4">
                  <a class="dropdown-item text-primary" href="/category/green-roofing">Green Roof System</a>
                  <a class="dropdown-item" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
                  <a class="dropdown-item text-primary" href="/category/liquid-waterproofing-systems">Liquid Waterproofing</a>
                  <a class="dropdown-item" href="/category/elastathane">Elastathane 25</a>
                  <a class="dropdown-item" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
                  <a class="dropdown-item" href="/tools/flexitec-calculator">Liquid Rubber</a>
                  <a class="dropdown-item text-primary" href="#">Skylights</a>
                  <a class="dropdown-item" href="#">Flat Glass Rooflights</a>
                  <a class="dropdown-item" href="#">Domes</a>
                  <a class="dropdown-item text-primary" href="#">Flat Roof Outlets</a>
                  <a class="dropdown-item" href="/category/flat-roof-outlets">Water Outlets</a>
                  <a class="dropdown-item" href="/category/flat-roof-vents">Flat Roof Vents</a>
                </div>
                <div class="col-md-4">
                  <a class="dropdown-item navbar-brand text-primary h5" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
                  <a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
                  <a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
                  <a class="dropdown-item" href="/category/duoply">Duoply</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item navbar-brand text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
                  <a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
                  <a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
                  <a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
                  <a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
                  <a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item navbar-brand text-primary" href="/category/torch-on-felt">Roofing Felt</a>
                  <a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item navbar-brand text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
                  <a class="dropdown-item" href="/category/osb">OSB</a>
                </div>

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


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

给TA打赏
共{{data.count}}人
人已打赏
未分类

python 3.7.3 - concurent.futures的等待问题

2022-9-10 3:07:39

未分类

谁能解释一下为什么这个reduce方法的返回是这样的?

2022-9-10 3:07:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索