javascript - bootstrap 的 navbar 如何在平板设备上变成汉堡包形式

问题描述

问 题

这是我现在的代码，他只能在手机尺寸变成汉堡包形式

        <div class="row">
            <div class="logostyle col-sm-2">
                   <img alt="" src="/NewCClogo.gif">
               </div>
            <div class="col-sm-10">
                <div id="myCollapse" class="collapse navbar-collapse nav-style">
                    <ul class="nav navbar-nav navbar-left row" style="left:10px;width:60%">
                        <li class="col-sm-3" ><a href="#" class="navtitlt">1</a></li>
                        <li class="col-sm-3"><a href="#" class="navtitlt">2</a></li>
                        <li class="col-sm-3"><a href="#" class="navtitlt">3</a></li>
                        <li class="col-sm-3"><a href="#" class="navtitlt">4</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right LoginCaret">
                        <li><a href="#" style="font-size: 15px;">RETAILER LOGIN ></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="navbar-header" >
            <button class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

解决方案

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
@media (min-width: 768px) {
  .navbar {
    border-radius: 4px;
  }
}
@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

你看一下bootstrap.css，它的媒体查询

当宽度超过768px，汉堡会展开，你可以在sass里面修改为自己的值，然后重新编译一份来用

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);

一般这些变量都在 _variables.scss 里面

这篇关于javascript - bootstrap 的 navbar 如何在平板设备上变成汉堡包形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！