.btn-group 汉堡菜单问题和混乱答案

【问题标题】：.btn-group hamburger menu issues and confusion.btn-group 汉堡菜单问题和混乱
【发布时间】：2017-04-26 21:42:31
【问题描述】：

我正在创建一个响应式网站，而且我对 bootstrap 还比较陌生。我正在尝试创建一个响应式导航，它变成一个小于 1340 像素的汉堡菜单。我现在正在使用拆分按钮设置，请参阅https://jsfiddle.net/ethacker/u38scspb/，它并不能很好地工作，它变成了一个可滚动的东西。我希望下拉菜单在小于 1340 像素的屏幕上看起来像这样。

我正在尝试添加导航栏类（请参阅https://jsfiddle.net/ethacker/d306gphq/1/）。当我这样做时，导航栏汉堡图标不再显示。

所以我的问题是：
1.如何让汉堡菜单图标显示？
2. 我这样做是对的，还是有更简单的方法？
3. 如何在移动设备上查看/小于 1340px 的屏幕时使其看起来像上图？
4. 如何在小于 1340px 而不是仅在移动端触发汉堡包按钮？

我正在努力学习，但我不确定该往哪个方向前进。

我的 CSS 代码：

body {
    background-image: url('backgroundarrows.png');
}
body > div.container-fluid > header {
    background-color: #e9e7ff;
    margin-top: 0;
    text-align: center;
}
.inline-display {
    display: inline;
}

.float-right {
    float: right;
}

#logo {
    height: 90px;
    width: 170px;
}

#search {
    margin-right: 1%;
}

.container-fluid {
    padding: 0;
}

.content {
    padding: 1%;
    background-color: #f9fdff;
    border: solid thin lightgray;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 0 1%;
}

section.content {
    width: 60%;
}

aside.content {
    width: 30%;
    text-align: center;
}

.btn {
    color: rgb(181,181,225);
}

#my-btn-group{
    margin-left: 1%;
}

.mybtngroup {
    border-right: solid thin rgb(181,181,225);
    border-left: solid thin  rgb(181,181,225);
}

.mybtngroup > a.btn.divider {
    border-right: solid thin rgb(181,181,225);
}

.heading, div.quip{
    font-family: "Monotype Corsiva", cursive;
    text-align: center;
}
div.quip, aside > h2.heading{
    border-bottom: thin solid grey;
}

div.quip {
    font-size: 16px;
}
a{
    color: rgb(165, 165, 205);
    text-decoration: none;
}

#blogposts {
    margin-top: -5%;
}

我的 HTML：

<div class="container-fluid">
<header class="page-header">
    <!-- logo -->
    <h1 class="inline-display"><a href="index.php"><img id="logo" src="mommyinfologo.png"/></a></h1>
    <br/>
    <div class="btn-group" id="my-btn-group">
        <!-- Home Group -->
        <div class="btn-group mybtngroup">
            <a class="btn" href="index.php">Home</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/mommy-madness">This Mommy's Madness</a></li>
                <li><a href="/about">About Mommy Info</a></li>
                <li><a href="/contact">Contact Mommy Info</a></li>
            </ul>
        </div>
        <!-- Pregnancy group-->
        <div class="btn-group mybtngroup">
            <a class="btn" href="/pregnancy">Pregnancy</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/pregnancy/trying-to-conceive">Trying to Conceive</a></li>
                <li><a href="/pregnancy/fetal-development">Fetal Development</a></li>
                <li><a href="/pregnancy/gender-predictions">Gender Predictions</a></li>
                <li><a href="/pregnancy/labor-and-delivery">Labor and Delivery</a></li>
            </ul>
        </div>
        <!-- All About Baby group-->
        <div class="btn-group mybtngroup">
            <a class="btn" href="/all-about-baby">All About Baby</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/all-about-baby/advice">Advice</a></li>
                <li><a href="/all-about-baby/guidelines">Guidelines</a></li>
                <li><a href="/all-about-baby/milestones">Milestones</a></li>
                <li><a href="/all-about-baby/learning-development">Learning Development</a></li>
            </ul>
        </div>
        <!-- Health and Nutrition group-->
        <div class="btn-group mybtngroup">
            <a class="btn" href="/health-and-nutrition">Health and Nutrition</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/health-and-nutrition/pregnancy-nutrition">Pregnancy Nutrition</a></li>
                <li><a href="/health-and-nutrition/breastfeeding">Breastfeeding</a></li>
                <li><a href="/health-and-nutrition/formula-feeding">Formula Feeding</a></li>
                <li><a href="/health-and-nutrition/toddler-nutrition">Toddler Nutrition</a></li>
                <li><a href="/health-and-nutrition/prenatal-exercise">Prenatal Exercise</a></li>
                <li><a href="/health-and-nutrition/postpartum-exercise">Postpartum Exercise</a></li>
                <li><a href="/health-and-nutrition/organic-diy-health">Organic DIY Health</a></li>
            </ul>
        </div>
        <!-- Party Momma group-->
        <div class="btn-group mybtngroup">
            <a class="btn" href="/party-momma">Party Momma</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/party-momma/pregnancy-announcement">Pregnancy Announcement</a></li>
                <li><a href="/party-momma/gender-reveal">Gender Reveal</a></li>
                <li><a href="/party-momma/baby-shower">Baby Shower</a></li>
                <li><a href="/party-momma/birth-announcement">Birth Announcement</a></li>
                <li><a href="/party-momma/birthdays">Birthdays</a></li>
            </ul>
        </div>
        <!-- Stations group-->
        <div class="btn-group mybtngroup">
            <a class="btn" href="/stations">Stations</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/stations/hospital-bag">Hospital Bag</a></li>
                <li><a href="/stations/diaper-bag">Diaper Bag</a></li>
                <li><a href="/stations/changing-station">Changing Station</a></li>
                <li><a href="/stations/baby-gear">Baby Gear</a></li>
            </ul>
        </div>
        <!-- Memory Markers group-->
        <div class="btn-group mybtngroup">
            <a class="btn" href="/memory-markers">Memory Markers</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="/memory-markers/diy">Do It Yourself</a></li>
                <li><a href="/memory-markers/buy-it">Buy It</a></li>
            </ul>
        </div>
        <!-- Reviews group-->
        <div class="btn-group mybtngroup">
            <a class="btn mycaret" href="/reviews">Reviews</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </a>
            <ul class="dropdown-menu mylist">
                <li><a href="reviews/games">Game Reviews</a></li>
                <li><a href="reviews/gear">Gear Reviews</a></li>
                <li><a href="reviews/learning">Learning Reviews</a></li>
            </ul>
        </div>
        <!-- Blog-->
        <a class="btn mybtngroup" id="blog" href="/mommy-madness">
            Blog
        </a>
    </div> <!-- closing div#btn-group-justified -->
    <input class="float-right" type="text" name="search" id="search" placeholder="Search"/>

【问题讨论】：

标签： html css twitter-bootstrap navigation navbar

【解决方案1】：

这是来自 Bootstrap 的代码，它在使用平板电脑或手机时使导航栏崩溃。

<!-- 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 class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>

您可以在此处了解更多信息：http://getbootstrap.com/components/#navbar

您需要将@media 查询选择器包含在您的main.css 中，以便元素在特定屏幕宽度上进行更改。例如：

    @media (min-width: 768px) {
     p { color: red; } 
    }

【讨论】：