Question

所以我是bootstrap的新手。我在GitHub上检查了网站上的这个例子：https://github.com/twbs/bootstrap/tree/master/docs/examples/dashboard

这是我需要的一点点。我可以调整一下，使其适用于我的需求，除了一个。有一个带链接的侧边栏。当你让你的屏幕更小时（如在移动设备上发生的那样），侧边栏会消失。我想确保侧边栏消失，但用按钮将其取回。就像本例中的顶部导航一样。这里是代码的片段（并非所有都重要，我假设）

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <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="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Help</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
      </form>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item</a></li>
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
        <li><a href="">More navigation</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
      </ul>
    </div>

因此<nav>隐藏在较小的设备上并形成一个菜单按钮

另外一个侧面问题，那个咏叹调意味着什么。我看过几个咏叹调-...课程，但不确定它的作用/意思。

Answer 1

如果您想根据屏幕分辨率显示或隐藏元素，您可以在CSS中执行以下操作：

    @media (max-width: 767px) {
      .nav-sidebar {
        display: none;
      }
    }
    @media (min-width: 767px) {
      .nav-sidebar {
        display: block;
      }
    }

仅当屏幕宽度至少为nav-sidebar时，代码才会显示属于类767px的元素。

您可以在此处找到您要执行的操作的完整示例：http://bootsnipp.com/snippets/featured/responsive-navigation-menu

将菜单更改为小型设备上的按钮

1 个答案: