Bootstrap Dropdown没有滑动

时间:2015-11-26 15:20:59

标签: css twitter-bootstrap twitter-bootstrap-3

我的移动崩溃引导程序菜单有问题。我还使用另一个超级菜单(yamm.css)在桌面模式下有更多的可能性。

目前我正处于一个我不知道该怎么做的地步,因为我根本无法看到问题,为什么我的下拉列表不会将内容滑落 - 而只是“滑动”它。数据崩溃完美地工作,它向下滑动内容并显示导航,但导航中的下拉列表没有。

最好看看jsfiddle:http://jsfiddle.net/u6pe61vu/3/

信息:只有Point“Qualität”有一个下拉列表/子菜单。

但是堆栈要我添加代码...所以我这样做:

代码:

<div class="container navigation" id="navigation">
    <nav class="navbar navbar-default navbar-static-top yamm">
        <div class="navbar-header"> <a class="collapsed visible-xs" data-toggle="collapse" data-target="#main" aria-expanded="false">Menü</a>

            <button type="button" class="navbar-toggle collapsed" id="toggleButton" data-toggle="collapse" data-target="#main" aria-expanded="false">
                <div class="hamburger"> <span class="sr-only">Button um die Navigation anzeigen zu lassen.</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </div>
                <div class="navbar-close hidden"> <span class="sr-only">Button um die Navigation zu schließen.</span>  <span class="icon-close"></span>

                </div>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="main">
            <ul class="nav nav-pills nav-justified">
                <li><a href="#">Ausbau <span class="sr-only">(aktiv)</span></a>
                </li>
                <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Qualität <span class="caret"></span></a>

                    <ul class="dropdown-menu">
                        <li>
                            <div class="yamm-content row">
                                <ul class="col-md-3 col-sm-3 list-unstyled">
                                    <li class="listheading"><a href="#">Qualitätsprozess</a>
                                    </li>
                                </ul>
                                <ul class="col-md-3 col-sm-3 list-unstyled">
                                    <li class="listheading"><a href="#">Aktuell</a>
                                    </li>
                                    <li><a href="#">Aktuell</a>
                                    </li>
                                    <li><a href="#">Aktuell</a>
                                    </li>
                                    <li><a href="#">Aktuell</a>
                                    </li>
                                    <li><a href="#">Aktuell</a>
                                    </li>
                                </ul>
                                <ul class="col-md-3 col-sm-3 list-unstyled">
                                    <li class="listheading"><a href="#">Aktuell</a>
                                    </li>
                                    <li><a href="#">Aktuell</a>
                                    </li>
                                </ul>
                                <ul class="col-md-3 col-sm-3 list-unstyled">
                                    <li class="listheading"><a href="#">Unterpunkt 4</a>
                                    </li>
                                    <li><a href="#">Lorem Ipsum</a>
                                    </li>
                                    <li><a href="#">Lorem Ipsum</a>
                                    </li>
                                    <li><a href="#">Lorem Ipsum</a>
                                    </li>
                                    <li><a href="#">Lorem Ipsum</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="yamm-content row">
                                <ul class="col-md-3 col-sm-3 list-unstyled">
                                    <li class="listheading"><a href="#">Unterpunkt 5</a>
                                    </li>
                                    <li><a href="#">Lorem Ipsum</a>
                                    </li>
                                    <li><a href="#">Lorem Ipsum</a>
                                    </li>
                                    <li><a href="#">Lorem Ipsum</a>
                                    </li>
                                    <li><a href="#">Lorem Ipsum</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Themen</a>
                </li>
                <li><a href="#">Service</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </nav>
</div>

CSS:

$primary: #7ba4d0;
$gradient-navi-start: #7ba4d0;
$gradient-navi-end: #6290bf;
$open-navi: #f3f8fc;
$font-color: #2d2d2d;
$grey: #d5d9dc;
$darkgrey: #656565;
$green: #b6ceb4;
$yellow: #fcf18e;
$orange: #fbcda4;
$red: #ef8a90;
$purple: #c6bdd3;
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .yamm-content {
  padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}

.navbar {
    min-height: 0;
    border: 0;
}
.navbar-default {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    border-radius: 4px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, $open-navi 100%, $open-navi 100%) repeat scroll 0 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f8fc', endColorstr='#f3f8fc', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    color: $primary;
    text-shadow: none;
    border-color: $open-navi;
}
.nav-pills>li>a:hover, .nav-pills>li>a:focus {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, $open-navi 100%, $open-navi 100%) repeat scroll 0 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f8fc', endColorstr='#f3f8fc', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    color: $primary;
    text-shadow: none;
}
.nav-pills>li>a {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, $gradient-navi-start 100%, $gradient-navi-end 100%) repeat scroll 0 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ba4d0', endColorstr='#6290bf', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    color: #fff;
    border-radius: 0px;
    font-size: 18px;
    text-shadow: 1px 1px 0px rgba(30, 30, 30, 0.45);
    padding: 19px 15px 22px 15px;
}
.nav-pills>li:first-of-type>a {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.nav-pills>li:last-of-type>a {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.nav-pills>li {
    border-right: 1px solid #4c7ba5;
    border-left: 1px solid #8baed2;
}
.nav-pills>li:last-of-type {
    border-right: 0;
}
.nav-pills>li:first-of-type {
    border-left: 0;
}
.dropdown-menu {
    margin: 0px 0px 0px;
    border: 0;
    background-color: $open-navi;
    -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.175);
    box-shadow: 0 8px 10px rgba(0,0,0,0.175);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.yamm .yamm-content {
    padding: 20px 10px;
}
.yamm-content ul {
    display: block;
}
.yamm-content ul li {
    display: inline-block;
    width: 100%;
}
.yamm-content ul li a {
    padding: 10px 26px 8px 26px;
    color: $font-color;
    border-bottom: 1px solid $grey;
    width: 100%;
    display: inline-block;
    font-size: 13px;
}
.yamm-content ul li a:hover {
    color: #656565;
    text-decoration: none;
}
.listheading a {
    background-image: url(../img/arrowlist.png);
    background-repeat: no-repeat;
    background-position: 10px 11px;
    background-color: $primary;
    color: #fff !important;
    font-size: 13px;
    border: 0 !important;
}
.listheading a:hover {
    text-decoration: underline !important;
    color: #fff !important;
}
@media (max-width: 767px) {
.navigation {
        background-color: $primary;
        margin-top: 10px;
    }
    .container.navigation {
        padding-left: 0px;
        padding-right: 0px;
    }
    .navbar-header a {
        cursor: pointer;
        color: #fff;
        font-size: 18px;
        display: inline-block !important;
        padding-top: 12px;
        padding-left: 10px;
    }
    .navbar-header .navbar-toggle {
        border: 0;
        background-color: $primary;
    }
    .navbar-header .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background-color: $primary;
    }
    .navbar-header .navbar-close {
        color: #fff;
        font-size: 16px;
    }
    .navbar-header .navbar-close .icon-close {
        background: url(../img/icon-close.png) no-repeat;
        height: 15px;
        width: 15px;
        display: block;
    }
    .navbar-header .navbar-toggle .icon-bar {
        background-color: #fff;
    }
    .navbar-header a:hover {
        text-decoration: none;
    }
    .navbar-default {
        margin-bottom: 0px !important;
        box-shadow: none !important;
    }
    .navbar-default .navbar-collapse {
        border: 0;
        box-shadow: none;
        background-color: $open-navi;
        padding-left: 0px;
        padding-right: 0px;
    }
    .nav-pills>li {
        border: 0;
    }
    .nav-justified>li>a {
        text-align: left;
    }
    .nav-pills>li>a {
        background: $open-navi;
        border-radius: 0px !important;
        color: $font-color;
        text-shadow: none;
        padding: 10px 25px;
    }
    .nav-pills>li>a:hover {
        background: #fff;
        color: $darkgrey;
    }
    .nav-pills>li>a.dropdown-toggle {
        padding-left: 25px;
        background: url(../img/arrowblack.png);
        background-repeat: no-repeat;
        background-position: 6px 16px;
    }
    .nav-pills>li>a.dropdown-toggle:hover {
        background-color: #fff;
    }
    .nav-pills>li>a>.caret {
        display: none;
    }
    .nav-pills>li+li {
        margin-left: 0px;
    }
    .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
        color: $font-color;
        background-color: #fff;
    }
}

提前多多感谢!

1 个答案:

答案 0 :(得分:0)

我用一些css(布局)修复它,这在智能手机的媒体查询中修复:

.dropdown-menu {
     position:relative;
}

如果我切换到位置:相对下拉菜单只是向下滑动,菜单的其余部分仍然存在,并且与之前绝对定位的下拉菜单没有重叠,但为什么不能解决这个问题。盒子?