【发布时间】：2019-11-23 16:00:49
【问题描述】：
当我有一个水平导航栏时，它在我的智能手机上显示为折叠，只占用切换图标的垂直空间。但是，当我尝试创建一个垂直导航栏时，我能得到的最好的结果就是让切换图标占据整个列。
我有一个现有网站，我正在将其转换为 bootstrap 4.3.1，以便它在智能手机上运行得更好。你可以在http://www.lionsclub.ca/ 看到我的实验，我在那里发布了最新版本的主页，以便我可以通过我的智能手机进行测试。我只是在复制新版本之前确保它没有完全损坏。
我希望导航栏位于左侧，主要内容位于右侧，因此导航栏和主要内容位于 .如果我不这样做，我无法让主要内容浮动到导航栏的右侧。
为了让导航栏在计算机屏幕上展开，我必须为导航元素指定类 navbar-expand-md，这似乎需要我为 ul 导航栏元素指定类 flex-column。当我这样做时，导航栏正确显示，折叠切换在大屏幕上不存在，但在智能手机上显示。如果我想看的话，我可以切换菜单。
但是，要让第二个 div（用于主要内容）显示在右侧，我必须指定 col-9 之类的内容作为其类（如果我变大，它不会浮动在右侧） . Flex-column 不起作用。
当我这样做时，事情的表现几乎是合理的。然而折叠的导航栏占据了整列，占用了大量的屏幕空间。有没有办法让它折叠到封闭左上角的浮动元素？
<div class="container">
<div class="row">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html" title="West Hill - Highland Creek Lions Club home page"> home </a>
</li>
</ul>
</div>
</nav>
<div class="col-9">
some content here
</div>
</div>
</div>
正如我所说，代码可以正常工作，但不符合我的要求。我真的希望折叠的导航栏占用的空间不超过切换图标。水平导航栏也存在同样的问题，但不那么令人反感，因为水平内容在滚动时会消失。垂直内容总是占用空间。
有没有人知道如何让这项工作比我想出的更好？
【问题讨论】：
标签： bootstrap-4