Question

我刚刚开始使用twitter bootstrap，并尝试使用它来构建一个废弃网站。我在创建具有垂直下拉列表的水平导航栏时遇到问题，每个<li>作为新行。（我当前的下拉列表中的所有<li>都在同一行中。

有人可以教我怎么做？

Navbar 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;
  }

Answer 1

这是我给出的答案，为我和其他人解决了一个非常类似的问题。也许这对你有用。

我有类似的问题。我把它缩小到“显示器：表格单元格”;条目。通过环顾四周并“玩”，我设法找到了解决问题的方法

首先：

.navbar .nav li .dropdown-menu li {display：block;宽度：自动; }

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

其次：

.dropdown-menu {left：auto; }

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

具有垂直下拉CSS的Bootstrap水平导航栏

1 个答案: