引导水平导航条与垂直下拉CSS

Bootstrap horizontal navigation bar with vertical dropdown CSS

本文关键字：垂直 CSS 水平 导航      更新时间：2023-09-26

我刚刚开始玩推特引导和我试图建立一个网站从废料与它。我有困难创建一个水平导航栏与垂直下拉每个<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;
  }

这是我给自己和别人解决了一个非常相似的问题的答案。也许它对你有用。

我也遇到过类似的问题。我将范围缩小到"display: table-cell;"条目。通过环顾四周和"玩"，我设法找到了一个解决我的情况

:

。Navbar .nav .dropdown-menu li{显示:块;宽度:汽车;}

设置下拉菜单下的列表项显示为一个块(下拉菜单的最大宽度)。

其次:

。下拉菜单{左:自动;}

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

相关文章：