Bootstrap展开菜单/导航栏按百分比显示,并在需要时滚动

我之前已经问过类似的问题,但是由于我对上一个没有任何答复,因此试图澄清得更好;)谢谢!


我在Bootstrap的“ xs”视图(汉堡按钮)中扩展了导航栏/菜单。

  • 如何使导航栏/菜单扩展到100%并在需要时可滚动?

原始代码:

#menu1 .navbar-collapse{padding:0;}

使用原始代码时,菜单将打开到屏幕面积的大约50%,并且下拉菜单可滚动(很好)。

我的代码(我正在寻找解决方案):

#menu1 .navbar-collapse{padding:0; min-height:100%}

当我尝试添加以上CSS时,什么也没发生。看起来还是一样。最低高度是怎么回事:100%不会一直将下拉范围扩大?

任何想法如何解决这个问题?

非常感谢。 /马库斯


整个菜单的CSS:

/* menu 1 - XS view */
#menu1 { background-color: #f5f5f5; min-height: 40px;}
#menu1 .navbar-collapse{padding:0; min-height: 100%;}
#menu1 .nav > li > a { color: #000; padding: 10px 15px 10px 15px; min-height: 15px; background-color: transparent; font-size:14px;}
#menu1 .nav > li:hover > a,#menu1 .nav > li.open > a { background-color:#008080; color:#fff; border-radius:3px;}
#menu1 .dropdown-menu { padding-bottom: 0; }
#menu1 .dropdown-inner { display: table; }
#menu1 .dropdown-inner ul { display: table-cell; }
#menu1 .dropdown-inner a { min-width: 175px; display: block; padding:4px 20px; clear: both; line-height: 20px; color: #333333; font-size: 12px; }
#menu1 .dropdown-inner li a:hover { color: #008080; }
#menu1 .see-all { display: block; margin-top: 0.5em; border-top: 1px solid #DDD; padding: 3px 20px; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 3px 3px; font-size: 12px; }
#menu1 .see-all:hover,#menu .see-all:focus { text-decoration: none; color: #ffffff; background-color: #008080;}
#menu1 #category { float: left; font-size: 16px; line-height: 40px; color: #000; margin-left:15px;}
#menu1 .btn-navbar {font-size: 15px; font-stretch: expanded; color: #FFF; padding: 2px 18px; float: right; background-color: #008080;}
#menu1 .btn-navbar:hover,#menu1 .btn-navbar:focus,#menu1 .btn-navbar:active,#menu1 .btn-navbar.disabled,#menu1 .btn-navbar[disabled] { color: #ffffff; background-color: #000; }
@media (min-width: 768px) {
 #menu1 .dropdown:hover .dropdown-menu {
 display: block;
}
}
@media (max-width: 767px) {
#menu1 .navbar-nav{margin:0;}
#menu1 .in{border-top:1px dotted #bbb;}
#menu1 {
 border-radius: 4px;
}
 #menu1 div.dropdown-inner > ul.list-unstyled {
 display: block;
}
 #menu1 div.dropdown-menu {
 margin-left: 0 !important;
 padding-bottom: 10px;
 background-color:#fff;
}
 #menu1 .dropdown-inner {
 display: block;
}
 #menu1 .dropdown-inner a {
 width: 100%;
 color: #222;
}
 #menu1 .dropdown-menu a:hover,#menu .dropdown-menu ul li a:hover {
 background-color:#eee;
}
 #menu1 .see-all {
 margin-top: 0;
 border: none;
 border-radius: 0;
 color: #222;
}
#menu1 .see-all:hover{color: #008080;}
}

HTML:

  <nav id="menu1" class="navbar-default navbar-fixed-top hidden-sm hidden-md hidden-lg">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo str_replace("Categories","Menu",$text_category);; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
      <li class="hidden-xs"><a href="<?php echo $home; ?>"><b><?php echo $text_home;  ?></b></a></li>

            <li><a href="/index.php?route=information/information&information_id=4"><b>About us</b></a></li>
            <li><a href="/index.php?route=information/information&information_id=6"><b>Find us</b></a></li>
            <!-- <li><a href="/index.php?route=information/information&information_id=8"><b>Buy or sell</b></a></li>  -->
            <li><a href="/index.php?route=information/contact"><b>Contact us</b></a></li>

    </uL>
          <ul class="nav navbar-nav">



        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle disabled" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
                      <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> 

            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'],ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>

          </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>

        <?php } ?>
        <?php } ?>

      </ul>
    </div>
  </nav>
leon_hit 回答:Bootstrap展开菜单/导航栏按百分比显示,并在需要时滚动

我找到了解决方案。它使用'vh'而不是'px'起作用。视口的高度:

#menu1 .navbar-collapse{ padding:0; min-height: 70vh;}
本文链接:https://www.f2er.com/3117362.html

大家都在问