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

时间：2017-04-26 21:42:32

标签： html css twitter-bootstrap navigation navbar

我正在创建一个响应式网站，而且我是一个相对较新的引导程序。我试图创建一个响应式导航，变成一个低于1340像素的汉堡包菜单。我现在正在使用拆分按钮设置，请参阅https://jsfiddle.net/ethacker/u38scspb/，它确实不能正常工作，它会变成可滚动的东西。我希望在不到1340像素的屏幕上看到这样的下拉列表。

desired mobile menu

我尝试添加导航栏类（请参阅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"/>

1 个答案:

答案 0 :(得分：0)

使用平板电脑或手机时，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; } 
    }
相关问题
最新问题