Question

我已根据自己的需要创建了此菜单。它是响应式的，因为我使用的是bootstrap，它是自定义的，因为我在菜单的右侧需要2行。我需要的是，如何以低于768x1280的分辨率进行切换导航？这就是菜单的创建方式：

<nav class="navbar navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="row col-xs-4">
            <ul class="nav navbar-nav">
                <li><img src="img/logo.png"></li>
            </ul>
        </div>
        <div class="row col-xs-8" >
            <div class="row col-xs-12">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" class="fb"> </a></li>
                    <li><a href="#" class="li"> </a></li>
                </ul>
            </div>
            <div class="row col-xs-12">
                <ul class="nav navbar-nav navbar-right" >
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#" >Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Answer 1

我认为以下示例适用于你的needes：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu1">
        <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" data-toggle="collapse" data-target="#menu2">
        <span class="sr-only">Toggle navigation2</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <li><img src="img/logo.png"></li>
    </div>
    <div class="row col-xs-8 pull-right">
    <div class="navbar-collapse collapse pull-right" id="menu1">
      <ul class="nav navbar-nav">
        <li><a href="#" class="fb"> </a></li>
        <li><a href="#" class="li"> </a></li>
      </ul>
    </div><!--/.nav-collapse -->
    </div>
    <div class="row col-xs-12 pull-right">
    <div class="navbar-collapse collapse pull-right" id="menu2">
      <ul class="nav navbar-nav">
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#" >Projects</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Answer 2

你应该添加这样的按钮，其中headerCol是div的id，其中包含你要折叠的元素。我很抱歉我的英语不好。我给你举个例子：

这是我的标题导航栏：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#headerCol">
        <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="index">MYSITE</a>
    </div>
    <div class="navbar-collapse collapse pull-right" id="headerCol"><!-- start nav-collapse -->
      {% block headernav %}
      <ul class="nav navbar-nav">
        <li class="active"><a href="index">Home</a></li>
        <li><a href="about">About us</a></li>
        <li><a href="questions">Questions</a></li>
          <li><a href="contacts">Contacts</a></li>
      </ul>
     {% endblock %}
    </div><!-- end nav-collapse -->
  </div>
</div>

使用Bootstrap自定义响应式CSS菜单

2 个答案: