css - 在页脚中显示菜单，但在移动设备上显示在页眉中

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类。