创建引导菜单汉堡图标仅在移动设备中显示在中型设备（平板电脑）机器人上答案

【问题标题】：Create bootstrap menu hamburger Icon displayed on medium devices (tablets) bot only in mobiles创建引导菜单汉堡图标仅在移动设备中显示在中型设备（平板电脑）机器人上
【发布时间】：2017-05-17 20:08:43
【问题描述】：

我正在尝试使用引导程序创建导航菜单。

我有一个与 CodePen example. 非常相似的菜单

与每个普通导航栏一样工作

.navbar, .navbar-inverse {
    border-radius: 0;
    border: none;
    margin-bottom: 0;
    min-height: 80px;
}

.nav li {
    display: inline;
    color: white;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
    font-family: Lato;
    font-size: 1.7em;
    font-weight: 300;
    padding: 30px 25px 33px 25px;
}

.navbar-inverse .navbar-nav li a:hover {
    background-color: #444444;
    transition: 0.7s all linear;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--/ Bootstrap -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
           </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>

但我希望在中型设备平板电脑和手机上显示汉堡包图标。

目前仅适用于手机。

最好的方法是什么？

【问题讨论】：

最好的办法是在 CSS 中改变媒体查询
在 bootstrap 4 中更容易，如果你想切换到它，你可以更改导航类，如 navbar-toggleable-md
@Brian 就是这样？只是换课？
看看这里：coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint
@Gerard 谢谢你的帮助。这就是我要找的东西

标签： jquery html css twitter-bootstrap

【解决方案1】：

根据http://getbootstrap.com/css/#grid-media-queries 和 cmets by Gerard 使用媒体查询

媒体查询

我们在 Less 文件中使用以下媒体查询来在我们的网格系统中创建关键断点。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

我们偶尔会扩展这些媒体查询以包含最大宽度将 CSS 限制在一组更窄的设备上。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

【讨论】：