css - Bootstrap 下拉菜单不滑动

标签 css twitter-bootstrap twitter-bootstrap-3

我有移动折叠 Bootstrap 菜单的问题。我还使用另一个大型菜单 (yamm.css) 在桌面模式下有更多的可能性。

目前我不知道该怎么做，因为我根本看不出问题所在，为什么我的下拉列表不会将内容向下滑动 - 而只是“滑动”到它上面。数据折叠效果完美，它向下滑动内容并显示导航，但导航中的下拉菜单没有。

更好地了解 jsfiddle:http://jsfiddle.net/u6pe61vu/3/

信息:只有点“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;
    }
}

非常感谢!

最佳答案

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

.dropdown-menu {
     position:relative;
}

如果我切换到 position: relative 下拉菜单只是向下滑动并且菜单的其余部分仍然存在并且没有与之前的绝对定位下拉菜单重叠，但为什么不能开箱即用？

关于css - Bootstrap 下拉菜单不滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33942057/

上一篇：html - 使用图标字体的替代方法

下一篇：html - 使用 "position:relative"向上移动 div 后如何删除剩余空间

相关文章：

html - 在 CSS3 中制作单边平行四边形

html - 图像链接

javascript - 表单中输入元素周围的 CSS 轮廓

html - Bootstrap Collapse - 无动画

jquery - 在每第三篇文章后添加 div

javascript - 使用jquery在鼠标悬停时自动生成 Bootstrap 下拉菜单

angularjs - 仅当浏览器本身不支持日期输入时，如何使用 Angular UI 的 Bootstrap DatePicker？

javascript - 按钮未正确更新输出

javascript - 如何从 JQuery 中的表行中提取 PHP 值以供稍后使用？

css - XS 设备上从容器到容器流体

©2024 IT工具网  联系我们