twitter-bootstrap – Bootstrap navbar – 从移动设备中删除固

发布时间：2020-12-18 00:27:59 所属栏目：安全来源：网络整理

导读：如何更改移动设备未固定的标题,但固定为md和lg屏幕大小？例如,您可以将nav类更改为; 移动设备： nav class =“navbar navbar-default”role =“navigation” 桌面： nav class =“navbar navbar-default navbar-fixed-top”role =“navigation” ?? nav cla

如何更改移动设备未固定的标题,但固定为md和lg屏幕大小？

例如,您可以将nav类更改为;

移动设备：< nav class =“navbar navbar-default”role =“navigation”>

桌面：< nav class =“navbar navbar-default navbar-fixed-top”role =“navigation”>

<nav 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="#navbar-brand-centered">
        <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="navbar-brand navbar-brand-centered">Brand</div>
    </div>
    <div class="collapse navbar-collapse" id="navbar-brand-centered">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>           
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

解决方法

您想要与移动设备或更小的屏幕尺寸隔离？有区别.如果你想要后者：

HTML：

<nav class="navbar navbar-default navbar-static-top" role="navigation">

CSS：

@media (min-width:992px) {

    body {padding-top:HEIGHTOFNAVBAR}
    .navbar-static-top {position:fixed;top:0;right:0;left:0;}

}

如果您想要在移动设备上实际避免固定导航,您可以使用javascript嗅探设备是否触摸.

/* --------------- SUPPORTS TOUCH OR NOT for IOS,Android,and Windows Mobile --------------- */
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au / Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports = (function() {
    var d = document.documentElement,c = "ontouchstart" in window || navigator.msMaxTouchPoints;
    if (c) {
        d.className += " touch";
        return {
            touch: true
        }
    } else {
        d.className += " no-touch";
        return {
            touch: false
        }
    }
})();

然后你可以使用HTML(相同)：

<nav class="navbar navbar-default navbar-static-top" role="navigation">

CSS

.no-touch body {padding-top:HEIGHTOFNAVBAR}
  .no-touch .navbar-static-top {position:fixed;top:0;right:0;left:0;}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!