汉堡菜单没有显示在Bootstrap3中

时间:2016-10-12 12:06:16

标签: html css twitter-bootstrap

我在Private Function MyF() As Integer Dim c As New myClass If c.somework() = 1 Then Return 1 Return 0 End Function 中使用navnav-bar

Bootstrap3

我可以阻止在较小的设备宽度上显示汉堡包菜单吗?

我想显示家庭,物品,联系人等文字,而不是菜单,就像在桌面视图中一样。

Here’s我不想要的行为示例。

1 个答案:

答案 0 :(得分:2)

试试这个:

检查演示HERE

HTML:

<nav class="navbar">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <a class="navbar-brand" href="#">Brand</a>
    </div>


    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only ">(current)</span></a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>


  </div>
  <!-- /.container-fluid -->
</nav>

CSS:

.nav::after,
.nav::before,
.navbar-header::after,
.navbar::after {
  display: table-caption;
}

.nav.navbar-nav li,
.nav.navbar-nav li a {
  display: inline-block;
}
.navbar-nav .open .dropdown-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}