Bootstrap 4仅在小屏幕上启用数据切换时的导航栏折叠

时间:2017-09-29 19:27:48

标签: twitter-bootstrap bootstrap-4

要在单击项目时折叠移动屏幕上的导航栏,我添加了数据切换选项。但即使导航栏未折叠,这也会影响大屏幕。

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark navbar-toggleable-md">
  <div class="container">

    <button class="navbar-toggler navbar-toggler-right border-2" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-navicon fa-inverse"></i>
            </button>

    <div class="collapse navbar-collapse ng-animate-disabled" id="navbarCollapse" ng-if="!header.user">
      <div class="navbar-nav w-100">
        <a class="nav-item nav-link" data-toggle="collapse" data-target="#navbarCollapse" href="#!market">Market</a>
        <a class="nav-item nav-link" data-toggle="collapse" data-target="#navbarCollapse" href="#!pricing">Pricing</a>
        <a class="nav-item nav-link" data-toggle="collapse" data-target="#navbarCollapse" href="#!about">About</a>
      </div>
    </div>

  </div>
</nav>

有没有办法只为大屏幕启用折叠。

0 个答案:

没有答案