多列在水平大型菜单列表中不起作用

如何解决多列在水平大型菜单列表中不起作用

我有bootstrap 4全宽超级菜单:

CSS:

F<T>

现在,我在.menu-large { position: static !important; } .megamenu { padding: 20px 20px; width: 100%; } .megamenu > div > li > ul { padding: 0; margin: 0; } .megamenu > div > li > ul > li { list-style: none; } .megamenu > div > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .megamenu > div > li > ul > li > a:hover,.megamenu > div > li > ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .megamenu.disabled > a,.megamenu.disabled > a:hover,.megamenu.disabled > a:focus { color: #999999; } .megamenu.disabled > a:hover,.megamenu.disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid: DXImageTransform.Microsoft.gradient(enabled=false); cursor: not-allowed; } .megamenu .dropdown-header { color: #428bca; font-size: 18px; } .megamenu .container{ background-color:#f4f4f4; } @media (max-width: 768px) { .megamenu { margin-left: 0; margin-right: 0; } .megamenu > li { margin-bottom: 30px; } .megamenu > li:last-child { margin-bottom: 0; } .megamenu.dropdown-header { padding: 3px 15px !important; } .navbar-nav .open .dropdown-menu .dropdown-header { color: #fff; } } 中添加containerrow以显示第4列。因此将ul添加到col-md-3中,但实际上row无效,我在col-md-3上看到空白。

HTML:

container

我该如何解决此问题?

图片问题:

enter image description here

DEMO HERE

解决方法

问题是导航栏中的容器设置为display:flex,因此您需要通过添加flex-grow-1w-100

使行全宽

.menu-large {
  position: static !important;
}

.megamenu {
  padding: 20px 20px;
  width: 100%;
}

.megamenu > div > li > ul {
  padding: 0;
  margin: 0;
}

.megamenu > div > li > ul > li {
  list-style: none;
}

.megamenu > div > li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}

.megamenu > div > li > ul > li > a:hover,.megamenu > div > li > ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}

.megamenu.disabled > a,.megamenu.disabled > a:hover,.megamenu.disabled > a:focus {
  color: #999999;
}

.megamenu.disabled > a:hover,.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  cursor: not-allowed;
}

.megamenu .dropdown-header {
  color: #428bca;
  font-size: 18px;
}
.megamenu .container{
  background-color:#f4f4f4;
}

@media (max-width: 768px) {
  .megamenu {
    margin-left: 0;
    margin-right: 0;
  }
  .megamenu > li {
    margin-bottom: 30px;
  }
  .megamenu > li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header {
    color: #fff;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="fixed-top navbar navbar-light bg-light navbar-expand-md justify-content-center">
  <div class="container">
    <a class="navbar-brand" href="/"> Brand </a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">Home</a>
        </li>
        <li class="dropdown menu-large nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Categories </a>
          <ul class="dropdown-menu megamenu">
            <div class="container">
              <div class="row flex-grow-1">
                <li class="col-md-3 dropdown-item">
                  <ul>
                    <li class="dropdown-header">Glyphicons</li>
                    <li><a href="#">Available glyphs</a>
                    </li>
                    <li class="disabled"><a href="#">How to use</a>
                    </li>
                    <li><a href="#">Examples</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Dropdowns</li>
                    <li><a href="#">Example</a>
                    </li>
                    <li><a href="#">Aligninment options</a>
                    </li>
                    <li><a href="#">Headers</a>
                    </li>
                    <li><a href="#">Disabled menu items</a>
                    </li>
                  </ul>
                </li>
                <li class="col-md-3 dropdown-item">
                  <ul>
                    <li class="dropdown-header">Button groups</li>
                    <li><a href="#">Basic example</a>
                    </li>
                    <li><a href="#">Button toolbar</a>
                    </li>
                    <li><a href="#">Sizing</a>
                    </li>
                    <li><a href="#">Nesting</a>
                    </li>
                    <li><a href="#">Vertical variation</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Button dropdowns</li>
                    <li><a href="#">Single</a>
                    </li>
                  </ul>
                </li>
                <li class="col-md-3 dropdown-item">
                  <ul>
                    <li class="dropdown-header">Input groups</li>
                    <li><a href="#">Basic example</a>
                    </li>
                    <li><a href="#">Sizing</a>
                    </li>
                    <li><a href="#">Checkboxes</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Navs</li>
                    <li><a href="#">Tabs</a>
                    </li>
                    <li><a href="#">Pills</a>
                    </li>
                    <li><a href="#">Justified</a>
                    </li>
                  </ul>
                </li>
                <li class="col-md-3 dropdown-item">
                  <ul>
                    <li class="dropdown-header">Navbar</li>
                    <li><a href="#">Default navbar</a>
                    </li>
                    <li><a href="#">Buttons</a>
                    </li>
                    <li><a href="#">Text</a>
                    </li>
                    <li><a href="#">Non-nav links</a>
                    </li>
                    <li><a href="#">Component alignment</a>
                    </li>
                    <li><a href="#">Fixed to top</a>
                    </li>
                    <li><a href="#">Fixed to bottom</a>
                    </li>
                    <li><a href="#">Static top</a>
                    </li>
                    <li><a href="#">Inverted navbar</a>
                    </li>
                  </ul>
                </li>
              </div>
            </div>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?