Question

我真的做了我的研究，但没有找到任何东西，我已经看到左右两边的物品然后倒在＆＃34;汉堡菜单＆＃34;在右边或左边。但是我并没有看到每侧有两个折叠的菜单，这就是我想要做的。

这是我到目前为止所做的：

崩溃了：

所以，我很喜欢拥有真正的汉堡菜单＆＃34;在没有折叠的左边，我试图添加它，但我只有一条白线。

其次，我希望将人物图标与文字＆＃34;关于我们＆＃34;，但是在折叠时我只想要出现人物图标。

所以最后的结果是这样的：

hamrbuger菜单可以点击，但不会删除任何菜单。

这甚至可以吗？我是新手，正如我之前所说的那样，我做了研究，但无法对这样的事情进行过任何修改。

ps：左边的汉堡菜单并不重要，我可以使用glyphicon。

这是我的代码：

HTML：

why_do_i_exist = *(2..9)
NUMS = why_do_i_exist.freeze

和我的CSS：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-book" aria-hidden="true"></span> calcular.cl</a>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#menu-toggle" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span> Menú</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Acerca de nosotros</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

希望你不要认为我很懒，但这是我第二天尝试这样做。

Answer 1

这不是一个完整的解决方案，只是两个单独的可折叠菜单的想法：

将两个切换按钮放在navbar-header块中。
将导航栏的左侧包裹在单独的collapse navbar-collapse块中。
请注意float属性。

http://codepen.io/glebkema/pen/kXAYGz

＆＃13;

.navbar-toggle.pull-left {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .pull-sm-left {
    float: left !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#collapseLeft" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseRight" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse pull-sm-left" id="collapseLeft">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Left 1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Left 2</a></li>
        <li><a href="#">Left 3</a></li>
      </ul>
    </div>

    <div class="collapse navbar-collapse" id="collapseRight">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right 1</a></li>
        <li><a href="#">Right 2</a></li>
        <li><a href="#">Right 3</a></li>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

bootstrap navbar two＆＃34; hamburger menu＆＃34;左和右

1 个答案: