html - 无法在 bootstrap 3 的容器中放置菜单-6ren

html - 无法在 bootstrap 3 的容器中放置菜单

转载作者：行者123 更新时间：2023-11-28 01:17:45

以下是显示垂直菜单栏的代码，当我运行代码时 dropdown菜单来自 Bootstrap container .

谁能帮忙，我怎样才能把 div 放在容器里。

菜单应该只放在container里面，但在我的例子中是 <div class="container">不展开。

.mega-dropdown {
  border: 2px solid #e0e0e0;
  position: relative;
}

.mega-dropdown.active:before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  left: -2px;
  height: 86px;
  background: #ffffff;
  border: 2px solid #77c04b;
  -webkit-box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14);
  -moz-box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14);
  box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14);
}

.mega-filtered-search .mega-dropdown.active:before {
  border-color: #0083c9;
}

.mega-dropdown.active:after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 100%;
  height: 80px;
  background: #ffffff;
}

.mega-dropdown.active>i {
  color: #686868;
}

.mega-dropdown.active .mega-content {
  display: block;
}

.mega-dropdown.active .mega-content>.inner {
  padding: 30px;
}

.mega-dropdown>button {
  border: none;
  background: none;
  font-size: 14px;
  line-height: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  padding: 0 30px 0 15px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.mega-dropdown>i {
  position: absolute;
  right: 15px;
  top: 50%;
  font-size: 14px;
  line-height: 0;
  color: #b7b7b7;
}

.mega-content {
  display: none;
  width: 690px;
  background: #fff;
  border: 2px solid #77c04b;
  position: absolute;
  top: 100%;
  left: -2px;
  z-index: 21;
  margin-top: 30px;
  -webkit-box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14);
  -moz-box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14);
  box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14);
}

.mega-filtered-search .mega-content {
  border-color: #0083c9;
  width: 304px;
}

.dropdown-wrap.active .mega-content {
  display: block;
}

.dropdown-wrap .mega-content {
  margin-top: 0;
  border: 1px solid #f1f1f1;
  -webkit-box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.14);
  -moz-box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.14);
  box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.14);
}

.dropdown-wrap .mega-content>.inner {
  padding: 30px;
}

.mega-list>header {
  font-size: 14px;
  color: #151515;
  text-transform: capitalize;
  position: relative;
  padding-left: 30px;
}

.mega-list>header i {
  color: #77c04b;
  font-size: 24px;
  position: absolute;
  left: 0;
  top: 50%;
  line-height: 0;
  margin-top: -4px;
}

.mega-list ul {
  margin: 15px -30px 0;
  padding: 0 0 0 30px;
  font-size: 13px;
}

.mega-list ul li {
  display: block;
  width: 25%;
  float: left;
  padding-right: 40px;
  position: relative;
}

.mega-list ul li:after {
  content: "\f105";
  font-family: "FontAwesome";
  position: absolute;
  right: 33px;
  top: 50%;
  line-height: 0;
}

.mega-list ul li a {
  display: block;
  color: inherit;
}

.mega-filtered-search .mega-dropdown {
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  border: none;
  background: #f4f4f4;
}

.category-list {
  margin: 0;
  padding: 0 0;
  position: relative;
}

.category-list>li,
.category-list>li>ul li {
  display: block
}

.category-list>li>a {
  display: block;
  padding: 12px 50px 12px 65px;
  font-size: 14px;
  position: relative
}

.category-list>li>a i {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 50px;
  text-align: center;
  line-height: 0;
}

.category-list>li>a:after {
  content: "\f105";
  font-family: "FontAwesome";
  position: absolute;
  right: 30px;
  top: 50%;
  line-height: 0;
}

.category-list>li:hover>a {
  background: #FED700;
  color: #FFF
}

.category-list>li:hover>ul {
  visibility: visible;
  filter: alpha(opacity=100);
  opacity: 1;
}

.category-list>li>ul {
  visibility: hidden;
  filter: alpha(opacity=0);
  opacity: 0;
  position: absolute;
  left: 100%;
  width: 100%;
  top: -2px;
  bottom: -2px;
  overflow-y: auto;
  background: #FED700;
  padding: 0 0;
}

.category-list>li>ul li a {
  display: block;
  padding: 12px 30px;
  font-size: 14px;
  text-decoration: none;
  color: #303E47
}

.category-list>li>ul li a:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #303E47
}

.dropdown-wrap {
  text-align: left;
  position: relative;
}

.dropdown-wrap.active {
  display: block;
}

.dropdown-wrap {
  display: none;
  border: 1px solid #b7b7b7;
  background: #FFF;
  width: 180px;
  position: absolute;
  right: 0;
  top: 100%;
  -webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.14);
  -moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.14);
  box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.14);
}

.dropdown-wrap {
  width: 370px;
}

.dropdown-wrap {
  font-family: "FontAwesome";
  content: "\f0d8";
  color: #ffffff;
  text-shadow: 0px -2px 0px #b7b7b7;
  font-size: 22px;
  position: absolute;
  right: 15px;
  line-height: 0;
  top: -2px;
}

.mega-dropdown-wrap {
  position: relative;
}

.mega-dropdown-wrap .mega-dropdown {
  width: 100%;
  border-width: 1px;
  height: 42px;
  max-width: 570px;
}

.mega-dropdown-wrap .mega-dropdown:before,
.mega-dropdown-wrap .mega-dropdown:after {
  display: none !important;
}

.mega-dropdown-wrap .mega-dropdown .mega-content {
  min-width: 200px;
  width: 50%;
  margin-top: 0;
  border: 1px solid #e0e0e0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #f4f4f4;
  left: -1px;
}

.mega-dropdown-wrap .mega-dropdown .mega-content .category-list>li>ul {
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  top: 0;
  bottom: 0;
}

.container {
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="myGroup" class="container">
  <div class="row rowd">
    <h2 class="text-center">Select Category</h2>
    <hr/>
    <div class="panel">
      <div class="row field-block">
        <div class="col-xs-12 col-md-3">
          <span class="required label"></span>
        </div>
        <div class="col-xs-12 col-md-9">
          <div class="mega-dropdown-wrap">
            <div class="mega-dropdown active">
              <button>Select Category</button>
              <i class="fa fa-navicon"></i>
              <div class="mega-content">
                <ul class="category-list">
                  <li><a href="#"><i class="fa fa-motorcycle"></i>Vehicles</a>
                    <ul>
                      <li><a href="#">Cars</a></li>
                      <li><a href="#">Bus, van, truck</a></li>
                      <li><a href="#">Industrial&nbsp;Vehicle</a></li>
                      <li><a href="#">Motorcycle</a></li>
                      <li><a href="#">Bicycle</a></li>
                      <li><a href="#">Spare Parts &amp; Accessories</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="fa fa-laptop"></i>Mobile&nbsp;&&nbsp;Computer</a>
                    <ul>
                      <li><a href="#">Mobile</a></li>
                      <li><a href="#">Computer&nbsp;&&nbsp;Laptop</a></li>
                      <li><a href="#">tablets</a></li>
                      <li><a href="#">iPads</a></li>
                      <li><a href="#">Accessories</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="fa fa-cc-diners-club"></i>Home&nbsp;Appliances</a>
                    <ul>
                      <li><a href="#">TV-Audio-Video</a></li>
                      <li><a href="#">Ac</a></li>
                      <li><a href="#">Washing&nbsp;Machine</a></li>
                      <li><a href="#">Fridge</a></li>
                      <li><a href="#">Camera&nbsp;&&nbsp;Lense</a></li>
                      <li><a href="#">Kitchen&nbsp;Accessories</a></li>
                      <li><a href="#">Game-Entertainment</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="fa fa-building"></i>Real&nbsp;Estate</a>
                    <ul>
                      <li><a href="#">For Sale</a></li>
                      <li><a href="#">For Rent</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="fa fa-female"></i>Fashion</a>
                    <ul>
                      <li><a href="#">Men</a></li>
                      <li><a href="#">Women</a></li>
                      <li><a href="#">Kids</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="fa fa-co"></i>Furniture</a>
                    <ul>
                      <li><a href="#">Sofa&nbsp;&&nbsp;Dining</a></li>
                      <li><a href="#">Bed&nbsp;&&nbsp;Wardrobes</a></li>
                      <li><a href="#">Home&nbsp;Decor&nbsp;and&nbsp;garden</a></li>
                      <li><a href="#">Kids&nbsp;Furniture</a></li>
                      <li><a href="#">other&nbsp;furniture</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="adicon-bell"></i>Jobs</a>
                    <ul>
                      <li><a href="#">Data Entry & Back Office</a></li>
                      <li><a href="#">BPO and Telecaller</a></li>
                      <li><a href="#">Sales and Marketing</a></li>
                      <li><a href="#">Operator and Technician</a></li>
                      <li><a href="#">Cook</a></li>
                      <li><a href="#">IT Engineer and Developer</a></li>
                      <li><a href="#">Designer</a></li>
                      <li><a href="#">Reception and Front Office</a></li>
                      <li><a href="#">Accountant</a></li>
                      <li><a href="#">Teacher</a></li>
                      <li><a href="#">Other Jobs</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="adicon-hat"></i>Services</a>
                    <ul>
                      <li><a href="#">Driver and Taxi</a></li>
                      <li><a href="#">Electronic Repair</a></li>
                      <li><a href="#">Computer Center</a></li>
                      <li><a href="#">Health and Beauty</a></li>
                      <li><a href="#">Gym and Fitness</a></li>
                      <li><a href="#">Sports and Equipment</a></li>
                      <li><a href="#">Other Services</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="adicon-dog"></i>Pets</a>
                    <ul>
                      <li><a href="#">Dogs</a></li>
                      <li><a href="#">Cats</a></li>
                      <li><a href="#">Food & Accessories</a></li>
                      <li><a href="#">Other Pets</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="adicon-heal"></i>Education</a>
                    <ul>
                      <li><a href="#">Books</a></li>
                      <li><a href="#">Online&nbsp;Tutorials</a></li>
                      <li><a href="#">Tution</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="adicon-smile"></i>Matrimony</a>
                    <ul>
                      <li><a href="#">I&nbsp;Aa&nbsp;Male</a></li>
                      <li><a href="#">i&nbsp;am&nbsp;female</a></li>
                    </ul>
                  </li>
                  <li><a href="#"><i class="adicon-hearts"></i>Note&nbsp;&&nbsp;Coin</a>
                    <ul>
                      <li><a href="#">Note</a></li>
                      <li><a href="#">Coins</a></li>
                    </ul>
                  </li>
                </ul>
                <div class="bor"></div><br>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div><br>
  </div>
</div>

最佳答案

因此，如果我做对了，您希望首先显示顶级菜单项，然后在单击其中任何一个时，您希望在所单击的元素下显示所单击元素下的子菜单。

如果是这种情况，您可以使用“data-toggle”和“data-taregt 属性，如下所示”来实现此效果。

<nav>
    <ul class="nav">        
        <li><a href="#" id="btn1" data-toggle="collapse" data-target="#submenu" aria-expanded="false">Toggle Me</a>
            <ul class="nav collapse" id="submenu" role="menu" aria-labelledby="btn1">
                <li><a href="#">Submenu1</a></li>
                <li><a href="#">Submenu2</a></li>
                <li><a href="#">Submenu3</a></li>
            </ul>
        </li>   
    </ul>
</nav>

这只是示例，使用此逻辑进一步构建其他菜单项，它们将在单击的元素正下方打开。

关于html - 无法在 bootstrap 3 的容器中放置菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51715426/

文章推荐： javascript - Regex.compile 在 Ruby 中做什么？

文章推荐： C++ primer 加 Chapter14 无类型堆栈

文章推荐： css - 在所有页面上使用单个导航栏，而不复制它？

文章推荐： javascript - Angular.js 中

的按键控制位置

ruby - 为什么这个声明是这样的？ (放置 ("here") && 中断) vs (放置 "here"&& 中断)
语句 1: [2,4,6,7,8].each do |i| (i % 2 == 0) || (puts "Not even" && break) puts i end 声明 2: [2
flutter - SingleChildScrollView无法正常工作？放置？
我有一张正在显示的卡片，上面有一些信息。我想将其包装在SingleChildScrollView中，因为我还有更多项目要添加到卡中，但是当我这样做时，屏幕只是空白吗？我曾尝试将其作为根(脚手架主体)放
wpf - 放置/添加新实体的位置应该放在新的ViewModel中吗？
我有一个带有窗体的 View ，该窗体显示ViewModel中ObservableCollection中对象的数据。 ObservableCollection使我可以浏览数据。 ObservableC
hadoop - 放置:意外的URISyntaxException
如何将时间戳附加文件名放在HDFS中？ hadoop fs -put topic_2018-12-15%2016:31:15.csv /user/file_structure/ 最佳答案您只是在运行
Emacs——放置/删除覆盖的运行时间增加了每次运行
我正在寻求一些帮助，以找出为什么以下叠加函数的运行时间会随着每次连续运行而增加。据我所知，如果缓冲区中的文本保持不变，则运行时间应该是相同的——即，仅向左/向右移动光标应该不会增加运行时间(但它确实
swift - 放置 UIActivityIndicatorView
我有一个事件指示器，它显示在中间。如何将其放置在 View 的左上角？ var activityIndicator = UIActivityIndicatorView() func show() {
C++放置 'const'麻烦。
首先，我想提前感谢所有回答这个问题的人。非常感谢您的帮助。这是我第一次在这里发帖，所以如果我发帖不礼貌，请原谅我。我的问题是关于方法原型(prototype)的: void copySubtree(
ios - UIPopoverController 放置
我正在开发一个应该是通用的应用程序，一个适用于 iPad 和 iPhone 的应用程序。我想让他们的界面尽可能相似。在 iPhone 应用程序中，我使用的是选项卡栏 Controller ，其中一个选
javascript - 放置、修补和删除不会返回错误
我目前正在使用 JS 开发 REST API，但遇到以下问题:该代码有效，但如果我尝试删除、放置或修补不存在的条目，它不会返回错误，但会打印成功消息。这是为什么？获取路由完美运行。 app.route
HTML block 放置
.a{ width:500px; height:500px; background:yellow; border: 3px dashed black; }
CSS div 放置
首先，请引用下图: 这基本上是我对布局的想法。我想要的是: 内容 div 成为“主要焦点”，例如当浏览器调整大小，它应该留在中间；当浏览器被调整大小时，我希望这两个图像基本上位于内容 div
java - 内存映射文件是否支持并发获取/放置？
我的应用程序需要使用内存映射并发访问数据文件。我的目标是使其在共享内存系统中可扩展。研究了内存映射文件库实现的源码，想不通: 在多个线程中从 MappedByteBuffer 中读取是否合法？ get
java - JDesktopPane 放置
我有一个 JDesktopPane 并希望以网格样式显示 JInternalFrames 而无需覆盖框架。框架的尺寸会有所不同，因此应动态分配它们的位置。我可以存储最后放置的框架的坐标，但可以移动、最
c++ - 放置-新地址对齐
根据https://isocpp.org/wiki/faq/dtors#placement-new传递给placement-new的地址必须正确对齐。但它给出的例子似乎与此相矛盾。 char memo
c - 函数的 int 放置
我最近一直在查看 Illumos 源代码，发现了一些奇怪的东西。在他们的源代码中，函数类型是这样写的: static int outdec64(unsigned char *out, unsigne
html - CSS 放置，图例旁边的图像
您好，我目前正在尝试在我的一张图片旁边放置一个图例，但我在放置时遇到了问题。我想将图例放在图像的左侧或右侧。这是我当前的代码: .my-legend .legend-title { text-a
string - 打印、放置、说出和转义字符
根据文档， print 之间的唯一区别和 say 似乎是后者添加了 "\n"(并使用 .gist 进行字符串化)。然而， perl6 -e 'print "del\b\b"' 打印“d”，有效地应用转
Flutter:放置 Logo 图像后背景变为一半
所以我试图将我的图像标志放在背景上，但我的背景突然被裁剪，出现了一半的黑屏。如图: 我的 main.dart 代码: import 'package:flutter/material.dart'; i
Azure DevOps如何在发布构建管道后获取输出(放置)文件夹中的文件名
我正在使用 Azure DevOps 构建 python 轮。我想让它尽可能通用，以便团队中的每个人都可以使用相同的管道来构建自己的 python 轮并将它们部署在一些 databricks 工作区中
WordPress 中的 Javascript 放置
在构建标准(非 WordPress)网页时，我通常会在正文末尾之前加载所有 javascript 文件，然后包含页面特定 js 代码的部分。 WorPress 建议使用 wp_enqueue_scri

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 无法在 bootstrap 3 的容器中放置菜单