html - .btn-group 汉堡菜单问题和困惑

Question

我正在创建一个响应式网站，而且我对 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"/>

Answer 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; } 
    }