在页脚显示菜单，但在移动设备的页眉中显示

Question

我目前的情况是这样的标题

<header class="container nav-container">
    <nav id="navbar-primary" class="navbar" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button 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>
            </div>
        </div><!-- /.container-fluid -->
    </nav>
</header>

所以它本质上是一个没有任何显示的空标题。相反，对于更大的屏幕，主导航实际上显示在页脚中

<footer class="footer container">
    <div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li>
                <a title="Link1" href="#">Link 1</a>
            </li>
            <li>
                <a title="Link2" href="#">Link 2/a>
            </li>
            <li>
                <a title="Link3" href="#">Link 3</a>
            </li>
        </ul>
    </div>
</footer>

目前，当我缩小到移动尺寸时，它会在标题中显示移动导航按钮，因为它应该这样做。但是，当您单击它时，它会在页脚中展开菜单。有什么办法可以将我正在使用的菜单放在页脚中，以便在移动尺寸时显示在页眉中？

谢谢

Answer 1

如果您不介意在页眉中复制页脚 html，您可以执行以下操作（我在演示中有一个可见的页眉导航栏，但我假设您会对其进行调整）：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="container hidden-after-768">
      <div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
        <ul class="nav navbar-nav">
          <li>
            <a title="Link1" href="#">Link 1</a>
          </li>
          <li>
            <a title="Link2" href="#">Link 2</a>
          </li>
          <li>
            <a title="Link3" href="#">Link 3</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="text-center">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
</div>
<!-- /.container -->

<footer class="footer container hidden-before-767">
  <div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
    <ul class="nav navbar-nav">
      <li>
        <a title="Link1" href="#">Link 1</a>
      </li>
      <li>
        <a title="Link2" href="#">>Link 2</a>
      </li>
      <li>
        <a title="Link3" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</footer>

使用 CSS：

@media (min-width: 768px)
{
  .hidden-after-768
  { 
    display: none; 
  }
}

@media (max-width: 767px)
{
  .hidden-before-767
  { 
    display: none; 
  }
}

这是一个演示：http://www.bootply.com/render/4NgDES9hYq

（可编辑版本http://www.bootply.com/4NgDES9hYq）

请注意，理论上您应该只能够对标题部分执行 <footer class="hidden-xs hidden-sm"> 和 <div class="hidden-md hidden-lg">，但我发现在 768 到 994 像素之间有一个点，它既不显示页脚菜单也不显示汉堡按钮，所以我们留下了一个没有任何导航链接的死角。这就是我创建额外的@media 类的原因。

Answer 2

你可以这样做：

<header id="header_wrapper">
 <div class="container2">
                <div class="header_box">
                    <nav class="navbar navbar-inverse" role="navigation">
                        <div class="navbar-header">
                            <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> 
                                <span class="sr-only">Toggle navigation</spaenter code heren> 
                                <span class="icon-bar"></span>  
                                <span class="icon-bar"></span> 
                                <span class="icon-bar"></span> 
                            </button>
                        </div>

                        <div id="main-nav" class="collapse navbar-collapse navStyle">
                            <ul class="nav navbar-nav" id="mainNav">
                                <li>></li> 
                                <li></li>
                                <li></li>
                                <li><a href="#">Logout</a></li> 
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </header>

Answer 3

$(document).ready(function(){
if($(window).width() <= 375){
 $('#navbar2').html($('#navbar').html())
 $('#navbar').html('')
}
else 
{
if($('#navbar2').length>1){
 $('#navbar').html($('#navbar2').html())
 $('#navbar2').html('')
 }
}});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  
<header class="container nav-container">
    <nav id="navbar-primary" class="navbar" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
 
                <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#navbar2" 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>
          <div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar2"></div>
		   </div>
        </div><!-- /.container-fluid -->
    </nav>
</header>
<footer class="footer container">
    <div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li>
                <a title="Link1" href="#">Link 1</a>
            </li>
            <li>
                <a title="Link2" href="#">Link 2</a>
            </li>
            <li>
                <a title="Link3" href="#">Link 3</a>
            </li>
        </ul>
    </div>
</footer>

</body>
</html>

您可以使用 jquery 脚本将页脚菜单移动到移动视图中的页眉菜单。

我在页眉中创建了一个临时 div，并将页脚菜单添加到该 div 并将切换菜单分配给该 div

Answer 4

您可以完全使用引导程序“hidden-X”类来做到这一点：

https://getbootstrap.com/css/#responsive-utilities

我制作了一个代码笔，其中包含一个重复菜单的示例，该菜单根据您提供的类隐藏：

https://codepen.io/c0un7z3r0/pen/NjrPvR

魔法的作用如下： 顶部菜单容器：

<div class="navbar navbar-inverse navbar-fixed-top hidden-lg" role="navigation">

底部菜单容器：

   <div class="navbar navbar-inverse navbar-fixed-bottom hidden-md hidden-sm hidden-xs" role="navigation">

注意 hidden-X 类，它们决定了每个菜单应该在什么情况下显示。我希望这会有所帮助！

Answer 5

您还可以使用position: absolute 或position: fixed 显示您的导航。举个简单的例子：

.navigation {
  position: absolute; // in your header
  top: 0;
  left: 0;

  @media screen and (min-width: 40em) {
    position: static; // in your footer
  }
}