关于在小型设备中显示下拉的问题

时间:2015-09-24 08:13:34

标签: css css3

请你看看This Demo,让我知道为什么Snippets上的下拉列表没有呈现在小型设备的顶层(它在大屏幕上正常工作但是如果你在电话视图中查看它,它是否隐藏在.navbar-collapse后面?我尝试将高号z-index添加到.droper但它没有工作

<nav class="navbar navbar-default site-navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav menu pull-right">
        <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
 <li class="menu-itemb"><a href="#">Snippets</a>
      <ul class="droper">
        <li class="menu-item sub-menu"><a href="#">CSS</a></li>
        <li class="menu-item sub-menu"><a href="#">HTML</a></li>
        <li class="menu-item sub-menu"><a href="#">jQuery</a></li>
        <li class="menu-item sub-menu"><a href="#">PHP</a></li>
        <li class="menu-item sub-menu"><a href="#">WordPress</a></li>
      </ul>
    </li>
      </ul>
    </div>
  </div>
</nav>

2 个答案:

答案 0 :(得分:1)

@Wavemaster的答案是你想要引导样式时应该使用的答案。但是,如果你仍然对你的实现采取什么措施。然后你就会做这样的事情。

{{1}}

答案 1 :(得分:0)

使用theese类进行下拉列表:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Snippets</a>
    <ul class="dropdown-menu">
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
    </ul>
</li>

另请参阅bootstrap documentation about navbars

尽量避免自己设计风格。而是使用bootstrap css并在您需要的地方准确编辑它。

例如,在bootply上使用基本启动器模板并更改导航上的文本。