css – 具有自举布局的最简单方法,其中汉堡菜单始终可见

前端之家收集整理的这篇文章主要介绍了css – 具有自举布局的最简单方法,其中汉堡菜单始终可见前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我看到很多人问相反,即使在小屏幕尺寸下也不会出现汉堡菜单,但我找不到如何轻松地始终启用汉堡菜单.

通常会出现:

这假设是一个标准的Bootstrap 3配置,由Visual Studio 2013 Web应用程序项目生成,因此您不需要标准的Visual Studio MVC HTML或Bootstrap CSS.

正如我希望它出现:

来自VS 2013 Web应用程序项目的生成的母版页

  1. <div class="navbar navbar-inverse navbar-fixed-top">
  2. <div class="container">
  3. <div class="navbar-header">
  4. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  5. <span class="icon-bar"></span>
  6. <span class="icon-bar"></span>
  7. <span class="icon-bar"></span>
  8. </button>
  9. @Html.ActionLink("ProjectName Here","Index","Home",null,new { @class = "navbar-brand hidden-xs" })
  10. </div>
  11. <div class="navbar-collapse collapse">
  12. <ul class="nav navbar-nav">
  13. <li>@Html.ActionLink("Home",new { area = "" },null)</li>
  14. </ul>
  15. </div>
  16. </div>
  17. </div>

更新:

显然,使用.Less的解决方案在使用ASP.Net MVC时是完全可以接受的,因此您不必限制原始CSS的答案.最近的发展意味着通过NuGet将Bootstrap.less添加到项目中变得微不足道.实际上,大多数简单的CSS答案都会因为从原始源再现最小css的任何解决方案而难以维护.

解决方法

您可以使用此CSS来覆盖Bootstrap的默认导航栏行为.
  1. .navbar-header {
  2. float: none;
  3. }
  4. .navbar-left,.navbar-right {
  5. float: none !important;
  6. }
  7. .navbar-toggle {
  8. display: block;
  9. }
  10. .navbar-collapse {
  11. border-top: 1px solid transparent;
  12. Box-shadow: inset 0 1px 0 rgba(255,255,0.1);
  13. }
  14. .navbar-fixed-top {
  15. top: 0;
  16. border-width: 0 0 1px;
  17. }
  18. .navbar-collapse.collapse {
  19. display: none!important;
  20. }
  21. .navbar-nav {
  22. float: none!important;
  23. margin-top: 7.5px;
  24. }
  25. .navbar-nav>li {
  26. float: none;
  27. }
  28. .navbar-nav>li>a {
  29. padding-top: 10px;
  30. padding-bottom: 10px;
  31. }
  32. .collapse.in{
  33. display:block !important;
  34. }

使用CSS:http://bootply.com/jXxt4Dc54A

UPDATE

这个问题最近被更改并标记为LESS.正如@cvrebert在最初询问问题时提到的那样,如果正在使用LESS源,则可以将@ grid-float-breakpoint设置为较大的值.

使用LESS:http://www.codeply.com/go/UNFhTH5Hm3

Bootstrap 4的更新

对于Bootstrap 4,添加了新的navbar-expand- *类来控制导航栏折叠断点.现在导航栏总是折叠,除非明确使用了navbar-expand- *类之一.因此,不需要更改CSS(或SASS变量)以使汉堡包始终显示.

  1. <nav class="navbar navbar-light bg-light fixed-top">
  2. <a class="navbar-brand" href="#">Navbar</a>
  3. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar1">
  4. </button>
  5. <div class="navbar-collapse collapse" id="collapsingNavbar1">
  6. <ul class="nav navbar-nav">
  7. <li class="nav-item">
  8. <a class="nav-link" href="#">Link</a>
  9. </li>
  10. <li class="nav-item">
  11. <a class="nav-link" href="#">Link</a>
  12. </li>
  13. </ul>
  14. </div>
  15. </nav>

Bootstrap 4:http://www.codeply.com/go/9WCE8jYmW8

猜你在找的CSS相关文章