当智能手机崩溃时，我如何才能让垂直的导航条不占用空间呢？
当智能手机崩溃时，我如何才能让垂直的导航条不占用空间呢？
提问于 2019-07-14 22:01:31
当我有一个水平的肚脐，它显示为崩溃在我的智能手机，只占垂直空间的按钮图标。然而，当我尝试创建一个垂直导航栏时，我所能得到的最好结果就是让切换图标占据整个列。
我有一个现有的网站，我正在转换为引导4.3.1，这样它将更好地在智能手机上工作。你可以在http://www.lionsclub.ca/上看到我的实验，在那里我发布了主页的最新版本，这样我就可以在智能手机上测试它。在我复制一个新版本之前，我只需要确保它没有被完全破坏。
我希望导航栏在左边，主内容在右边，所以导航条和主内容在a中。如果我不这样做，我就不能让主内容浮到肚脐的右边。
为了使导航条在计算机屏幕上被扩展，我必须为nav元素指定类navbar扩展-md，这似乎要求我为ul navbar元素指定类flex列。当我这样做时，导航条就会正常显示，大屏幕上没有折叠开关，而智能手机上却没有显示。如果我想看的话，我可以切换菜单。
但是，为了使第二个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>正如我所说的，代码工作，但行为不符合我的意愿。我真的想要崩溃的肚脐只占比按钮图标更多的空间。水平导航栏也存在同样的问题，但由于滚动时水平内容会消失，所以不那么令人反感。垂直内容总是占据空间。
有没有人知道比我想出的更好的方法让这件事更好？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-15 06:39:05
在col-[xx]-[99]的<div class='row'>中使用2 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57031459
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号