html - 如何在 Bootstrap 中创建包含多列的导航栏下拉菜单？

Question

我想知道如何使用 Bootstrap 创建包含多个垂直列的导航栏下拉列表。在我的例子中，我的链接是分类的，我希望每个类别类型都有一列。

这是一个包含多列的 Bootstrap 导航栏下拉示例:

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav dropdown">
        <li class="active"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Online Retailers <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li class="dropdown-header "><h4> Get 100% off on your first order. </h4>
                    <li><a href="#">Domino's Pizza</a></li>
                    <li><a href="#">Food Panda</a></li>
                    <li><a href="#">Mc Donalds</a></li>
                </li>
                <li><a href="#">Page 1-2</a></li>
                <li><a href="#">Page 1-3</a></li>
            </ul>
        </li>
        <li><a class="dropdown-toggle" data-toggle="dropdown" href="#">Hey Foodies <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li class="dropdown-header "><h4> Get 100% off on your first order. </h4></li>
                <li class="divider"></li>
                <li><a href="#">Domino's Pizza</a></li>
                <li><a href="#">Food Panda</a></li>
                <li><a href="#">Mc Donalds</a></li>
                <li><a href="#">Pizza Hut</a></li>
                <li><a href="#">Tasty Khana</a></li>
                <li><a href="#">Tiny Owl</a></li>
                <li><a href="#">KFC</a></li>
            </ul>
        </li>

Answer 1

此插件可能有帮助:Yamm3! MegMenu .请参阅示例片段和此处的另一个示例 Bootsnipp .

  $(function() {
    window.prettyPrint && prettyPrint()
    $(document).on('click', '.yamm .dropdown-menu', function(e) {
      e.stopPropagation()
    })
  })

/*!
 * Yamm!3
 * Yet another megamenu for Bootstrap
 * http://geedmo.github.com/yamm3
 *
 * Demo styles
 */

/* layout */

body {
  padding-bottom: 40px;
  color: #666;
}
pre {
  margin: 0;
  padding: 10px 20px !important;
}
footer {
  margin-top: 200px;
}
.container,
.jumbotron .container {
  width: auto;
  max-width: 1170px;
}
.jumbotron {
  margin: 60px 0;
  padding-left: 0;
  padding-right: 0;
}
.jumbotron.intro {
  margin-top: 0;
}
.jumbotron .navbar {
  font-size: 14px;
  line-height: 1.6;
}
/* menu styes */

.list-unstyled,
.list-unstyled ul {
  min-width: 120px
}
@media (min-width: 767px) {
  .panel-group {
    width: 400px;
  }
  .thumbnail {
    margin: 0;
  }
}
/* Grid demo styles */

.grid-demo {
  padding: 10px 30px;
}
.grid-demo[class*="col-"] {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 1em;
  text-align: center;
  line-height: 2;
  background-color: #e5e1ea;
  border: 1px solid #d1d1d1;
}
/*!
 * Yamm!3 - Yet another megamenu for Bootstrap 3
 * http://geedmo.github.com/yamm3
 * 
 * @geedmo - Licensed under the MIT license
 */

.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .yamm-content {
  padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar yamm navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

      </button><a href="#" class="navbar-brand">Yamm Megamenu</a>

    </div>
    <div id="navbar-collapse-1" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <!-- Classic list -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">List<b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li>
              <!-- Content container to add padding -->
              <div class="yamm-content">
                <div class="row">
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <p><strong>Section Title</strong>

                      </p>
                    </li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <p><strong>Links Title</strong>

                      </p>
                    </li>
                    <li><a href="#"> Link Item </a>

                    </li>
                    <li><a href="#"> Link Item </a>

                    </li>
                    <li><a href="#"> Link Item </a>

                    </li>
                    <li><a href="#"> Link Item </a>

                    </li>
                    <li><a href="#"> Link Item </a>

                    </li>
                    <li><a href="#"> Link Item </a>

                    </li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <p><strong>Section Title</strong>

                      </p>
                    </li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <p><strong>Section Title</strong>

                      </p>
                    </li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>
                      <ul>
                        <li><a href="#"> Link Item </a>

                        </li>
                        <li><a href="#"> Link Item </a>

                        </li>
                        <li><a href="#"> Link Item </a>

                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <!-- Accordion demo -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Accordion<b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li>
              <div class="yamm-content">
                <div class="row">
                  <div id="accordion" class="panel-group">
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a></h4>

                      </div>
                      <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">Ut consectetur ullamcorper purus a rutrum. Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a></h4>

                      </div>
                      <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">Nullam pretium fermentum sapien ut convallis. Suspendisse vehicula, magna non tristique tincidunt, massa nisi luctus tellus, vel laoreet sem lectus ut nibh.</div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a></h4>

                      </div>
                      <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">Praesent leo quam, faucibus at facilisis id, rhoncus sit amet metus. Sed vitae ipsum non nibh mattis congue eget id augue.</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <!-- Classic dropdown -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Classic<b class="caret"></b></a>

          <ul role="menu" class="dropdown-menu">
            <li><a tabindex="-1" href="#"> Action </a>

            </li>
            <li><a tabindex="-1" href="#"> Another action </a>

            </li>
            <li><a tabindex="-1" href="#"> Something else here </a>

            </li>
            <li class="divider"></li>
            <li><a tabindex="-1" href="#"> Separated link </a>

            </li>
          </ul>
        </li>
        <!-- Pictures -->
        <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Pictures<b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li>
              <div class="yamm-content">
                <div class="row">
                  <div class="col-xs-6 col-sm-2">
                    <a href="#" class="thumbnail">
                      <img alt="150x190" src="http://placehold.it/350x150">
                    </a>

                  </div>
                  <div class="col-xs-6 col-sm-2">
                    <a href="#" class="thumbnail">
                      <img alt="150x190" src="http://placehold.it/350x150">
                    </a>

                  </div>
                  <div class="col-xs-6 col-sm-2">
                    <a href="#" class="thumbnail">
                      <img alt="150x190" src="http://placehold.it/350x150">
                    </a>

                  </div>
                  <div class="col-xs-6 col-sm-2">
                    <a href="#" class="thumbnail">
                      <img alt="150x190" src="http://placehold.it/350x150">
                    </a>

                  </div>
                  <div class="col-xs-6 col-sm-2">
                    <a href="#" class="thumbnail">
                      <img alt="150x190" src="http://placehold.it/350x150">
                    </a>

                  </div>
                  <div class="col-xs-6 col-sm-2">
                    <a href="#" class="thumbnail">
                      <img alt="150x190" src="http://placehold.it/350x150">
                    </a>

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