使用UIkit 3的响应式Scrollspy

时间:2019-01-14 08:48:33

标签: javascript html css uikit

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="uk-card uk-card-default ">	
	<div class="uk-panel " uk-sticky="offset:80" >
		<ul uk-scrollspy-nav="closest: li; scroll: true; offset: 190" class="uk-flex  uk-flex-row " uk-grid>
				<li class="uk-active  uk-width-1-5"><a href="#">mount Mount Everest </a></li>	     
		        <li  class=" uk-width-1-5"><a href="#">computer bag</a></li>
		        <li class="uk-width-1-5"><a href="#">stack overflow overflow</a></li>
		        <li class="uk-width-1-5"><a href="#">mission impossible</a></li>
	         	<li class="uk-width-1-5"><a href="#">loremloremloremloremlorem</a></li>
		</ul>
	</div>	
</div>
这段代码是使用uikit3框架以scrollspy编写的。当我将桌面模式更改为移动模式时,scrollspy列表没有响应。在移动模式下看不到某些文本。在桌面模式下,文本分为5部分,文本会很好地显示。当我从桌面模式更改为移动模式时,未显示该文本。半文本将被剪切。请提出如何在移动模式以及桌面模式下显示文本的建议。并且  在移动模式下也分为五个部分,文本将显示为正当。

0 个答案:

没有答案