Question

我正在尝试制作一个垂直导航栏，我正在使用bootstrap 3.0，

我搜索了任何示例，只能找到this

<ul> 
 <li><a href="#">Home</a></li> 
   <li><a href="#">About</a> 
   <ul> 
  <li><a href="#">History</a></li> 
  <li><a href="#">Team</a></li> 
  <li><a href="#">Offices</a></li> 
  </ul> 
</li> 
<li><a href="#">Services</a> 
  <ul> 
  <li><a href="#">Web Design</a></li> 
  <li><a href="#">Internet 
        Marketing</a></li> 
  <li><a href="#">Hosting</a></li> 
  <li><a href="#">Domain Names</a></li> 
  <li><a href="#">Broadband</a></li> 
  </ul> 
</li>
<li><a href="#">Contact Us</a> 
  <ul> 
  <li><a href="#">United Kingdom</a></li> 
  <li><a href="#">France</a></li> 
  <li><a href="#">USA</a></li> 
  <li><a href="#">Australia</a></li> 
  </ul> 
</li> 
</ul>

但我并不完全想要这个，我想要的是这样的 enter image description here

我是CSS的新手，可以找到任何东西。

http://jsfiddle.net/CF5PQ/2/

任何人都可以帮忙提前谢谢。

Answer 1

为了让你开始..你必须设计你的风格像这样的列表：

ul li {
  /* styles for first level */ 
  background: #fff; /* white bg */

}

ul li ul li {
  /* styles for second level */
  background: #ccc; /* grey bg */ 
}

Answer 2

据我所知，您正在寻找多列菜单。您可以通过一些调整来获得它。

<ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Click Me!</a>
          <div class="dropdown-menu multi-column">
            <div class="row">
                <div class="col-md-6">
                    <ul class="dropdown-menu">
                        <li><a href="#">Top Left</a></li>
                        <li><a href="#">Bottom Left</a></li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <ul class="dropdown-menu">
                        <li><a href="#">Top Right</a></li>
                        <li><a href="#">Bottom Right</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
</ul>

您必须添加一些规则才能获得多列通见

 .dropdown-menu.multi-column {
        width: 250px; /*Set manually according to menu text and column count*/
}

.dropdown-menu.multi-column .dropdown-menu {
        display: block !important;
        position: static !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        min-width:100px;
}

这是小提琴：http://jsfiddle.net/5NfxT/1/

这是两个圆柱菜单。要获得更多信息，您必须更改div的“col-md-*”类以及.dropdown-menu .multi-column规则的宽度值。

<div class="col-md-6">

如您所知，Bootstrap使用网格系统将屏幕划分为12列。对于3列菜单，您必须使用col-md-4，对于4列圆柱菜单，请使用col-md-3。

另一点，如果你增加列数，你也必须加宽下拉菜单键盘。

使用CSS bootstrap的垂直导航栏

2 个答案: