0

我刚刚开始玩 twitter bootstrap，并试图用它来建立一个网站。我无法创建一个带有垂直下拉菜单的水平导航栏，每个下拉菜单都是<li>一个新行。（我当前的下拉列表都<li>在同一行）。

有人可以教我怎么做吗？

导航栏 HTML：

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="NIS.html">NIS<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">test1</a></li>
            <li><a href="#">test2</a></li>
            <li><a href="#">test3</a></li>
          </ul>

        </li>
        <li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="TNU.html">TNU</a></li>
        <li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="NIC.html">NIC</a></li>
        <li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="trial.html">trial</a></li>
        <li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
</div><!-- /.navbar -->

CSS：

 .navbar .navbar-inner {
    padding: 0;
  }
  .navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
  }
  .navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
  }
  .navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
  }
  .navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
  }
  .navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
  }
4

1 回答 1

1

这是我给出的答案，它为我自己和其他人解决了一个非常相似的问题。也许它会为你工作。

我有一个类似的问题。我将其缩小到“显示：表格单元格；” 入口。通过环顾四周和“玩耍”，我设法找到了解决我的情况的方法

第一的：

.navbar .nav li .dropdown-menu li { 显示：块；宽度：自动；}

将下拉菜单下的列表项设置为显示为一个块（下拉菜单持有者的最大宽度）。

第二：

.dropdown-menu { 左：自动；}

将下拉菜单放在正确的菜单项下。

于 2013-07-01T21:00:53.993 回答