Question

当我有一个水平导航栏时，它在智能手机上显示为折叠状态，仅占用了切换图标的垂直空间。但是，当我尝试创建垂直导航栏时，最好的办法是使切换图标占据整个列。

我有一个现有网站要转换为引导程序4.3.1，因此它将在智能手机上更好地工作。您可以在http://www.lionsclub.ca/上看到我的实验，我在其中发布了最新版的主页，以便可以从智能手机进行测试。在复制新版本之前，我只是确保它没有完全损坏。

我希望导航栏位于左侧，主要内容在右侧，因此导航栏和主要内容位于。如果不这样做，我将无法使主要内容浮动在导航栏的右侧。

为了使导航栏能够在计算机屏幕上展开，我必须为nav元素指定类navbar-expand-md，然后似乎需要我为ul导航栏元素指定类flex-column。当我这样做时，导航栏会正确显示，在大屏幕上不显示折叠开关，而在智能手机上显示。然后，如果我想查看它，就可以切换菜单。

但是，要使第二个div（主要内容）显示在右侧，我必须指定类似col-9的类（如果我放大，则它不会浮动在右侧）。 Flex列不起作用。

当我这样做时，事情的表现几乎是合理的。但是，折叠后的导航栏占据了整个列，占用了大量屏幕空间。有没有办法让它折叠到封闭的左上角的浮动元素？

<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">&nbsp;home&nbsp;</a>
    </li>
        </ul>
      </div>
    </nav>
    <div class="col-9">
    some content here
    </div>
  </div>
</div>

正如我所说，该代码可以工作，但不符合我的期望。我真的希望折叠的导航栏不超过切换图标占用的空间。水平导航栏也存在相同的问题，但问题较少，因为滚动时水平内容消失了。垂直内容始终占据空间。

有人知道有什么方法可以使这项工作比我提出的要好吗？

Answer 1

如何在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">&nbsp;home&nbsp;</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html" title="a history of the West Hill - Highland Creek Lions Club">&nbsp;about&nbsp;</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="activities.html" title="ongoing activities of the West Hill - Highland Creek Lions club">&nbsp;activities&nbsp;</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.html" title="how to contact the West Hill - Highland Creek Lions Club">&nbsp;contact&nbsp;</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="events.html" title="upcoming events of the West Hill - Highland Creek Lions Club">&nbsp;events&nbsp;</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="join.html" title="how to join the West Hill - Highland Creek Lions Club">&nbsp;join&nbsp;</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="links.html" title="other community organizations">&nbsp;links&nbsp;</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="members.html" title="current members of the West Hill - Highland Creek Lions Club">&nbsp;members&nbsp;</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="news.html" title="latest news from the West Hill - Highland Creek Lions Club">&nbsp;news&nbsp;</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="partners.html" title="our community partners">&nbsp;Community
                                Partners&nbsp;</a>
            </li>
            <li>&nbsp;</li>
            <li class="nav-item">
              <a class="nav-link" href="http://www.a711lions.org/" title="Lions Club district web site">&nbsp;Lions&nbsp;District&nbsp;A-711&nbsp;</a><br />&nbsp;
            </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 />&nbsp;
            </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 />&nbsp;
            </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>&nbsp;</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&nbsp;3,&nbsp;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 &amp; August when we don't meet, and June &amp; 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&nbsp;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 />&nbsp;
      </p>
      <!-- end of inserted content -->
    </div>
  </div>
</div>
<div class="footer">Serving the community since 1944</div>
<div class="full">
  <div class="copyright">copyright &copy; West Hill - Highland Creek Lions Club&nbsp;</div>
</div>

折叠时，如何获得垂直导航栏以不占用智能手机上的空间？

1 个答案: