如何将自动滚动条垂直添加到小屏幕的 css bootstrap 附加菜单?
How to add auto scroll bar vertically to cssbootstrap affix menu for smaller screens?
我正在使用 css bootstrap affix plugin 作为我网站上的置顶菜单。
我的菜单上有很多项目,这在桌面上不是问题。但是,当我在小型笔记本电脑上查看我的网站时,菜单的下半部分被截断了。
我需要在屏幕小的时候给菜单添加一个自动滚动条。
这是我的 html 代码
<div class="container">
<div class="row">
<nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column">
<ul class="nav nav-pills nav-stacked scrollspy affix-menu" id="docs-menu" data-spy="affix">
<li>
<strong>Code Generator</strong>
<ul class="nav">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#dependencies">Dependencies</a></li>
</ul>
</li>
<li>
<strong>Getting Started</strong>
<ul class="nav">
<li><a href="#installation">Installation</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#available-commands">Available Command</a></li>
</ul>
</li>
<li>
<strong>How To</strong>
<ul class="nav">
<li><a href="#how-to-create-views-layout">How to create a "views-layout"</a></li>
<li><a href="#how-to-create-resource">How to create a resource</a></li>
<li><a href="#how-to-create-controller">How to create a controller</a></li>
<li><a href="#how-to-create-model">How to create a model</a></li>
<li><a href="#how-to-create-routes">How to create routes</a></li>
<li><a href="#how-to-create-views">How to create all standard CRUD views</a></li>
<li><a href="#how-to-create-create-view">How to create a "create-view"</a></li>
<li><a href="#how-to-create-edit-view">How to create a "edit-view"</a></li>
<li><a href="#how-to-create-index-view">How to create a "index-view"</a></li>
<li><a href="#how-to-create-show-view">How to create a "show-view"</a></li>
<li><a href="#how-to-create-form-view">How to create a "form-view"</a></li>
<li><a href="#how-to-create-migration">How to create a database migration</a></li>
<li><a href="#how-to-create-form-request">How to create form-request</a></li>
<li><a href="#how-to-create-language">How to create a language file</a></li>
</ul>
</li>
<li>
<strong>Fields</strong>
<ul class="nav">
<li><a href="#model-fields-overview">Overview</a></li>
<li><a href="#model-fields-json">Creating fields from JSON file</a></li>
<li><a href="#model-fields-raw">Creating fields from a raw string</a></li>
</ul>
</li>
</ul>
</nav>
<div class="col-md-9 large-padding-sections" id="docs-main-column">
//Sections goes here.....
</div>
</div>
</div>
我尝试将 style="overflow-y: auto !important;"
添加到 <nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column"
,但没有成功。
如果屏幕不够高无法显示整个词缀菜单,我如何正确地向左侧 nav
添加垂直滚动条?
我认为问题在于,即使您给它指示滚动,也没有限制高度。试试这个:
height: 100vh;
overflow-y: scroll;
我正在使用 css bootstrap affix plugin 作为我网站上的置顶菜单。
我的菜单上有很多项目,这在桌面上不是问题。但是,当我在小型笔记本电脑上查看我的网站时,菜单的下半部分被截断了。
我需要在屏幕小的时候给菜单添加一个自动滚动条。
这是我的 html 代码
<div class="container">
<div class="row">
<nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column">
<ul class="nav nav-pills nav-stacked scrollspy affix-menu" id="docs-menu" data-spy="affix">
<li>
<strong>Code Generator</strong>
<ul class="nav">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#dependencies">Dependencies</a></li>
</ul>
</li>
<li>
<strong>Getting Started</strong>
<ul class="nav">
<li><a href="#installation">Installation</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#available-commands">Available Command</a></li>
</ul>
</li>
<li>
<strong>How To</strong>
<ul class="nav">
<li><a href="#how-to-create-views-layout">How to create a "views-layout"</a></li>
<li><a href="#how-to-create-resource">How to create a resource</a></li>
<li><a href="#how-to-create-controller">How to create a controller</a></li>
<li><a href="#how-to-create-model">How to create a model</a></li>
<li><a href="#how-to-create-routes">How to create routes</a></li>
<li><a href="#how-to-create-views">How to create all standard CRUD views</a></li>
<li><a href="#how-to-create-create-view">How to create a "create-view"</a></li>
<li><a href="#how-to-create-edit-view">How to create a "edit-view"</a></li>
<li><a href="#how-to-create-index-view">How to create a "index-view"</a></li>
<li><a href="#how-to-create-show-view">How to create a "show-view"</a></li>
<li><a href="#how-to-create-form-view">How to create a "form-view"</a></li>
<li><a href="#how-to-create-migration">How to create a database migration</a></li>
<li><a href="#how-to-create-form-request">How to create form-request</a></li>
<li><a href="#how-to-create-language">How to create a language file</a></li>
</ul>
</li>
<li>
<strong>Fields</strong>
<ul class="nav">
<li><a href="#model-fields-overview">Overview</a></li>
<li><a href="#model-fields-json">Creating fields from JSON file</a></li>
<li><a href="#model-fields-raw">Creating fields from a raw string</a></li>
</ul>
</li>
</ul>
</nav>
<div class="col-md-9 large-padding-sections" id="docs-main-column">
//Sections goes here.....
</div>
</div>
</div>
我尝试将 style="overflow-y: auto !important;"
添加到 <nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column"
,但没有成功。
如果屏幕不够高无法显示整个词缀菜单,我如何正确地向左侧 nav
添加垂直滚动条?
我认为问题在于,即使您给它指示滚动,也没有限制高度。试试这个:
height: 100vh;
overflow-y: scroll;