堆栈内存溢出
  简体   繁体   English

Bootstrap 3：自动剪辑附加侧导航

[英]Bootstrap 3: Auto-clip affixed side-nav

 原文  2015-03-06 05:17:55  4   1    javascript/ jquery/ twitter-bootstrap-3/ affix

问题描述

I've been playing around with this for some time but couldn't manage to get it working or find a similar question here. 我已经玩了一段时间了，但无法让它工作或在这里找到类似的问题。

Here is the fiddle . 这是小提琴 。

We have an affixed side navigation containing a variable number of links. 我们有一个包含可变数量链接的附加侧导航。 When the number of links get big, the side-nav goes beyond the available height. 当链接数量变大时，侧导航超出可用高度。 I would like to clip it off vertically based on available height (excluding the footer when it is in the view). 我想根据可用的高度垂直剪切它（在视图中时不包括页脚）。 I mean a scroll-bar should appear when the items are clipped. 我的意思是当剪辑项目时应该出现一个滚动条。

Has anyone worked on a similar issue? 有没有人处理过类似的问题？ I would really appreciate if you share your experience. 如果你分享你的经验，我将非常感激。 And please let me know if it's not a reasonable design :) 如果这不是一个合理的设计，请告诉我:)

I include some code here to make so happy: 我在这里包含了一些代码，让我们感到高兴：

HTML: HTML： 

<!-- Main Content -->
<div id="main-content" class="col-xs-9">
    <h2>Heading<a id="1"></a></h2>
    <p>Lorem ipsum ...</p>
    <h2>Heading<a id="2"></a></h2>
    <p>Lorem ipsum ...</p>
</div>
<!-- Sidebar -->
<div id="sidebar" class="col-xs-3">
    <div id="sidenav" role="navigation">
        <h3>Contents</h3>
        <ul class="nav nav-pills nav-stacked">
            <li><a class="list-group-item" href="#1">Heading</a></li>
            <li><a class="list-group-item" href="#2">Heading</a></li>
        </ul>
    </div>
</div>

JS: JS： 

// activate scrollspy and affix for sidenav
$('body').scrollspy({ target: '#sidenav' });
$('#sidenav').affix({
  offset: {
    top: 165
  }
})

CSS: CSS： 

#sidenav.affix {
    top: 50px;
    z-index: 1;
    width: 212.5px;
}
#sidenav {
    margin-bottom: 20px;
}

1 个解决方案

解决方案1
 0 已采纳  2015-03-06 17:22:42

Tricky because the element is position fixed. 棘手，因为元素是位置固定的。 Try modifying your .affix class: 尝试修改.affix类： 

#sidenav.affix {
  top: 50px;
  z-index: 1;
  width: 212.5px;
  bottom: 0;       /* <-- add */
  overflow: auto;  /* <-- add */
}

Example: 例： 

 /* Latest compiled and minified JavaScript included as External Resource */ // activate scrollspy and affix for sidenav $('body').scrollspy({ target: '#sidenav' }); $('#sidenav').affix({ offset: { top: 165 } }) // smooth scrolling $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 800); return false; } } }); 
 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ html, body { height: 100%; } body { padding-top: 50px; } footer { margin: 50px 0; } h2 { margin-top: 60px; } /* side navigation */ /* media queries that make the side nav position static have been removed for easier editing in jsfiddle */ #sidenav.affix { top: 50px; z-index: 1; width: 212.5px; bottom: 0; overflow: auto; } #sidenav { margin-bottom: 20px; } .nav-stacked>li+li { margin-top: 0; } .nav-stacked>li>a { border-radius: 0 !important; margin-top: -1px; } .nav-stacked>li:first-child>a { border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; } .nav-stacked>li:last-child>a { margin-bottom: 0 !important; border-bottom-right-radius: 4px !important; border-bottom-left-radius: 4px !important; } /* fix problem with anchors going behind top navbar */ #main-content h2 a { display: block; position: relative; top: -100px; } 
 <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </head> <!-- Side-nav comes after the main content --> <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <a class="navbar-brand" href="index.html">We have a nav bar also!</a> </div> </nav> <!-- Page Content --> <div class="container"> <!-- Page Heading/Breadcrumbs --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Test Page </h1> <ol class="breadcrumb"> <li><a href="index.html">Home</a> </li> <li class="active">Test Page</li> </ol> </div> </div> <!-- /.row --> <!-- Content Row --> <div class="row"> <div class="col-lg-12"> <!-- Main Content --> <div id="main-content" class="col-xs-9"> <h2>Heading<a id="1"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="2"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="3"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="4"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="5"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="6"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="7"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="8"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="9"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="10"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="11"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="12"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="13"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="14"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="15"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="16"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="17"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="18"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="19"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> <h2>Heading<a id="20"></a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p> </div> <!-- /.col-md-9 --> <!-- Sidebar --> <div id="sidebar" class="col-xs-3"> <div id="sidenav" role="navigation"> <h3>Contents</h3> <ul class="nav nav-pills nav-stacked"> <li><a class="list-group-item" href="#1">Heading</a> </li> <li><a class="list-group-item" href="#2">Heading</a> </li> <li><a class="list-group-item" href="#3">Heading</a> </li> <li><a class="list-group-item" href="#4">Heading</a> </li> <li><a class="list-group-item" href="#5">Heading</a> </li> <li><a class="list-group-item" href="#6">Heading</a> </li> <li><a class="list-group-item" href="#7">Heading</a> </li> <li><a class="list-group-item" href="#8">Heading</a> </li> <li><a class="list-group-item" href="#9">Heading</a> </li> <li><a class="list-group-item" href="#10">Heading</a> </li> <li><a class="list-group-item" href="#11">Heading</a> </li> <li><a class="list-group-item" href="#12">Heading</a> </li> <li><a class="list-group-item" href="#13">Heading</a> </li> <li><a class="list-group-item" href="#14">Heading</a> </li> <li><a class="list-group-item" href="#15">Heading</a> </li> <li><a class="list-group-item" href="#16">Heading</a> </li> <li><a class="list-group-item" href="#17">Heading</a> </li> <li><a class="list-group-item" href="#18">Heading</a> </li> <li><a class="list-group-item" href="#19">Heading</a> </li> <li><a class="list-group-item" href="#20">Heading</a> </li> </ul> </div> </div> <!-- /.col-md-3 --> </div> </div> <!-- /.row --> <hr> <!-- Footer --> <footer id="footer"> <div class="row"> <div class="col-lg-12"> <p>Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer</p> </div> </div> </footer> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 多级可折叠Bootstrap侧导航菜单有问题 - Trouble with multi-level collapsible Bootstrap side-nav menu 具有许多项目的Bootstrap 3侧面导航无法在全页视图中滚动 - Bootstrap 3 side-nav with many items won't scroll in full page view 折叠点击响应时的侧面导航 - Collapse Side-nav on click responsive 实现CSS侧导航不起作用 - Materialize CSS side-nav not working 我的侧面导航折叠无法在内部使用<form> - My side-nav collape will not work inside <form> 使用自定义汉堡包按钮使用jQuery触发MDBootstrap side-nav - Trigger MDBootstrap side-nav with jQuery using custom hamburger button 使用jQuery检测具体化框架侧面导航宽度 - Detecting materialize framework side-nav width using jquery 物化侧面导航链接不起作用 - Materialize side-nav links doesn't work 物化侧导航总是打开，不会加载折叠 - Materilize side-nav always open, won't load collapsed 使用materialize css在不同页面上显示不同的侧导航 - Display a different side-nav on a different page using materialize css
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM