如何在小屏幕的cssbootstrap附加菜单中添加垂直自动滚动条？

Question

我使用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？