Html bootstrap 3响应式超大菜单

我试了很多，但我解决不了这个问题

问题是菜单无法显示响应

我尝试这样的响应菜单

你想要这样吗

HTML

<div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li id="fat-menu" class="dropdown pink"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Services </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li id="fat-menu" class="dropdown rama"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Products </a>
            <div class="dropdown-menu" style="left:-250px !important; width:800px; " role="menu" aria-labelledby="drop3">
              <div class="nav-product"  role="main">
                <div class="col-lg-4">
                  <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/>
                    <div class="media-body">
                      <h4 class="pink">Labour Manage. System</h4>
                      <p>There Managing Contractor's Labours / Workers at the entry points with rich GUI... <a href="#">Read More</a></p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/crm-nav-icon.png" alt="eXiger CRM System" class="pull-left"/>
                    <div class="media-body">
                      <h4 class="rama" >eXiger CRM System</h4>
                      <p>awidely implemented strategy for managing a company's interactions with customers....<a href="#">Read More</a></p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/payroll-nav-icon.png" alt="Payroll Management" class="pull-left"/>
                    <div class="media-body">
                      <h4 class="blue">Payroll Management</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 ">
                  <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li id="fat-menu" class="dropdown green"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Technology </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li id="fat-menu" class="dropdown purple"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Marketing </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li id="fat-menu" class="dropdown orange"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">About Us </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li class="pinkdark"><a href="#" >Request a Quote</a></li>
        </ul>
      </div>

劳动管理。系统
在具有丰富GUI的入口点管理承包商的劳动力/工人

出口客户关系管理系统
为管理公司与客户的互动而实施的策略非常出色

薪酬管理
Donec在eget metus为非mi porta孕妇确定了最佳身份。梅塞纳斯·福西布斯·莫利斯·因特杜姆

副标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。梅塞纳斯·福西布斯·莫利斯·因特杜姆

副标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。梅塞纳斯·福西布斯·莫利斯·因特杜姆

副标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。梅塞纳斯·福西布斯·莫利斯·因特杜姆

副标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。梅塞纳斯·福西布斯·莫利斯·因特杜姆

副标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。梅塞纳斯·福西布斯·莫利斯·因特杜姆

副标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。梅塞纳斯·福西布斯·莫利斯·因特杜姆

如果不晚的话，我已经为bootstrap 3制作了这个超大菜单，也许它可以帮助你了解这个想法。

检查我使用的

col-md-4

和img class

img circle

。嘿@geedmo我刚刚偶然发现了你的超大菜单，这方面的工作非常出色！它将为我工作，所以我很感激！但我想知道你如何把它从点击改为悬停？按照你的编码方式，这可能吗？干杯与“.dropdown.open”的工作方式相同，此规则在悬停时打开菜单。dropdown:hover>.dropdown menu{display:block；}@geedmo。。。yamm上的伟大工作。我只是好奇，当你把浏览器缩小到300px左右时，我注意到三明治图标超出了它的容器。浏览器窗口的宽度也有限制。达到一定宽度后，它变为实心。你在哪里设置这些VAL？或者，如何确保三明治保持在预期边界内？