当我有一个水平导航栏时，它在我的智能手机上显示为折叠，只占用切换图标的垂直空间。但是，当我尝试创建垂直导航栏时，我能够得到的最好的方法是让切换图标占据整个列。
我有一个现有的网站，我正在将其转换为引导程序 4.3.1，因此它可以在智能手机上更好地工作。你可以在 http://www.lionsclub.ca/看到我的实验，在那里我发布了最新版本的主页，这样我就可以从智能手机上测试它。我只是确保在复制新版本之前它没有完全损坏。
我希望导航栏位于左侧，主要内容位于右侧，因此导航栏和主要内容位于 .如果我不这样做，我就无法让主要内容浮动到导航栏的右侧。
为了使导航栏在计算机屏幕上展开，我必须为 nav 元素指定类 navbar-expand-md，这似乎需要我为 ul 导航栏元素指定类 flex-column。当我这样做时，导航栏会正确显示，折叠切换在较大的屏幕上不存在，但在智能手机上显示。然后，如果我想查看菜单，我可以切换菜单。
但是，要使第二个div(用于主要内容)显示在右侧，我必须指定类似col-9之类的东西作为其类(如果我变大，它不会浮动在右侧)。弹性列不起作用。
当我这样做时，事情的行为几乎是合理的。但是，折叠的导航栏占据了整个列，占用了大量的屏幕空间。有没有办法让它折叠成封闭左上角的浮动元素？
<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>
正如我所说，代码有效，但行为方式不符合我想要的方式。我真的希望折叠的导航栏不会占用比切换图标更多的空间。水平导航栏也存在同样的问题，但不太令人反感，因为滚动时水平内容会消失。垂直内容始终占用空间。
有谁知道一种方法可以使这项工作比我想出的更好？
在<div class='row'>内使用 2 个带有col-[xx]-[99]的div 怎么样，它可以为你做到这一点......
- 对于左侧导航，我们使用：
<div class='col-12 col-sm-12 col-md-3'> ... </div> - 对于正确的内容区域，我们使用：
<div class='col-12 col-sm-12 col-md-9'> ... </div>
您 - 不会在下面的代码段中加载图像，因为您没有使用 HTTPS(您应该这样做)
工作片段如下：
@media screen and (max-width:768px) {
.bg-light {
background-color: transparent !important;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="http://www.lionsclub.ca/scripts/email.js"></script>
<link rel="stylesheet" href="http://www.lionsclub.ca/css/style.css" type="text/css">
</link>
<div class="banner">
<img src="http://www.lionsclub.ca/images/LionBanner.png" />
</div>
<div class="container">
<div class="row">
<div class='col-12 col-sm-12 col-md-3'>
<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>
<li class="nav-item">
<a class="nav-link" href="about.html" title="a history of the West Hill - Highland Creek Lions Club"> about </a>
</li>
<li class="nav-item">
<a class="nav-link" href="activities.html" title="ongoing activities of the West Hill - Highland Creek Lions club"> activities </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" title="how to contact the West Hill - Highland Creek Lions Club"> contact </a>
</li>
<li class="nav-item">
<a class="nav-link" href="events.html" title="upcoming events of the West Hill - Highland Creek Lions Club"> events </a>
</li>
<li class="nav-item">
<a class="nav-link" href="join.html" title="how to join the West Hill - Highland Creek Lions Club"> join </a>
</li>
<li class="nav-item">
<a class="nav-link" href="links.html" title="other community organizations"> links </a>
</li>
<li class="nav-item">
<a class="nav-link" href="members.html" title="current members of the West Hill - Highland Creek Lions Club"> members </a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html" title="latest news from the West Hill - Highland Creek Lions Club"> news </a>
</li>
<li class="nav-item">
<a class="nav-link" href="partners.html" title="our community partners"> Community
Partners </a>
</li>
<li> </li>
<li class="nav-item">
<a class="nav-link" href="http://www.a711lions.org/" title="Lions Club district web site"> Lions District A-711 </a><br />
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.lionsclubs.org/" title="The Lions Clubs International"><img src="http://a711lions.ca/images/LCI_primary_sig_2color_web.jpg" /></a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.dogguides.com/" title="The Lions Foundation of Canada"><img src="images/dogguides.gif" alt="Lions Foundation of Canada logo" /></a><br />
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.lcif.org/" title="Lions Clubs International Foundation">
<img src="http://www.a711lions.ca/images/lcif_h3c.gif" alt="LCIF logo" />
</a>
<br />
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/WestHillHighlandCreekLionsClub" title="follow us on Facebook">
<img id="followus" src="http://www.lionsclub.ca/images/facebook-icon.png" alt="follow us on Facebook" />
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-12 col-sm-12 col-md-9">
<!-- start of inserted content -->
<div class="hot">
<a href="http://www.lionsclub.ca/rainbarrel.html" title="rain barrel sale">
<img src="http://www.lionsclub.ca/images/rainbarrel.jpg" alt="rain barrel image" style="float: left;" />
<h6>Lions rainbarrel sale</h6>
<h6>Order from Stock!</h6>
</a>
<h4>New Stock!</h4>
<p> </p>
</div>
Welcome to the West Hill - Highland Creek Lions Club's web site. It's fun to be a Lion! We hope you'll join us.</p>
<p>The Club was chartered on November 3, 1944 and has been active in the community ever since. The club started the community's first newspaper and built the original <a href="https://www.toronto.ca/data/parks/prd/facilities/complex/2025/index.html">Heron Park
Community Centre</a>, which it later donated to the City.</p>
<p>We normally meet on the 2<sup>nd</sup> and 4<sup>th</sup> Tuesdays of each month (except for July & August when we don't meet, and June & December when we skip the last meeting) at the <a href="https://www.toronto.ca/data/parks/prd/facilities/complex/2025/index.html">Heron Park
Community Centre</a> (<a href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=292+Manse+Road,Toronto,+ON&sll=37.0625,-95.677068&sspn=114.541383,98.261719&ie=UTF8&z=16&iwloc=addr&om=1">292
Manse Road</a> South of Lawrence) at 7:00 PM. If you're not a member and would like to be a guest, contact us at the e-mail address below.</p>
<p><button onclick="initMailtoButton('secretary','');" style="border: 0px; margin:0px; padding: 0px;">Contact the club via e-mail</button>.<br />
</p>
<!-- end of inserted content -->
</div>
</div>
</div>
<div class="footer">Serving the community since 1944</div>
<div class="full">
<div class="copyright">copyright © West Hill - Highland Creek Lions Club </div>
</div>