折叠Bootstrap 3 Navbar超出界限（下拉列表）

时间：2014-01-08 11:45:55

标签： html css twitter-bootstrap less

我的网站顶部有一个普通的Bootstrap 3固定导航栏，非常好。我前面遇到的问题是，当导航栏在较小的设备中可以访问时崩溃，下拉项目将离开为导航栏指定的区域。下面的图片解释得最好：

Problem

因此， Dugi 部分是一个下拉菜单项。单击时，其下面的项目（标记为红色）超出菜单的红色部分。导航栏是不是应该与他们一起下来并掩盖空间？

无论如何，我显然已经触及了导航栏的样式，我想这就是它出错的地方。这就是我所感动的：

.navbar-default {
    background-color: @dry-red;
    background-image: -moz-linear-gradient(top, @dry-red, @mid-red);
    background-image: -ms-linear-gradient(top, @dry-red, @mid-red);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@dry-red), to(@mid-red));
    background-image: -webkit-linear-gradient(top, @dry-red, @mid-red);
    background-image: -o-linear-gradient(top, @dry-red, @mid-red);
    background-image: linear-gradient(top, @dry-red, @mid-red);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@dry-red', endColorstr='@mid-red', GradientType=0);
    border-color: @dark-red;
    overflow: visible;
    max-height: 51px;

    @media (max-width: 768px){
        max-height: none;
        height: auto;
    }

    @media (max-width: 470px){
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    max-height: 51px;

    @media (max-width: 768px){
        max-height: none;
    }
}

.navbar-default .navbar-brand {
    color: @lighten;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: @lighten-hover;
}

.navbar-default .navbar-nav > li > a {
    color: @lighten;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: @lighten-hover;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: @lighten;
    background-color: @dark-red;
}

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: @lighten-hover;
    background-color: @dark-red;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: @dark-red;
    border-bottom-color: @dark-red;
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: @dark-red;
    border-bottom-color: @dark-red;
}

.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: @dark-red;
    border-bottom-color: @dark-red;
}

.navbar-default .navbar-toggle {
    border-color: @dark-red;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: @dark-red;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: @lighten;
}

.nav > .dropdown, .dropdown-menu > li {
    position: relative;
    overflow: visible;
}

.navbar-collapse.in {
    overflow-y: visible;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: @lighten;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: @lighten-hover;
    }
}

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  right: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  right: 9px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

.nav-center {
    position: absolute;
    width: 91px;
    height: 50px;
    left: 50%;
    margin-left: -45px;
    z-index: 100;
}

.navbar-inner {
    position: relative;
}

这是HTML：

<nav class="website-nav navbar navbar-default navbar-static-top" role="navigation">

    <div class="navbar-inner">
        <div class="nav-center">
            <!-- <img src="{{ S_WEB_PATH }}images/brand.png" /> -->
            <div class="nav-brand"></div>
        </div>
    </div>

    <div class="alt-nav navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
            <span class="sr-only">Toogle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div><!-- Navigation header -->

    <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav">
            <li {{ INDEX_ACTIVE }}><a href="home"><span class="glyphicon glyphicon-cloud-upload"></span> Home</a></li>
            <li {{ REMOTE_ACTIVE }}><a href="remote"><span class="glyphicon glyphicon-globe"></span> Remote</a></li>
            <li {{ ZIP_ACTIVE }} class="visible-lg"><a href="zip"><span class="glyphicon glyphicon-folder-close"></span> ZIP</a></li>
            <li {{ POPULAR_ACTIVE }}><a href="popular"><span class="glyphicon glyphicon-star"></span> Popular</a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            {% if not S_LOGGED_IN %}
            <li><a href="#register" data-toggle="modal"><span class="glyphicon glyphicon-registration-mark"></span> Register</a></li>
            <li><a href="#login" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            {% else %}
            <li><a href="#"><span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;<span class="badge user-messages">0</span></a></li>
            <li><a href="#"><span class="glyphicon glyphicon-bell"></span>&nbsp;&nbsp;<span class="badge user-notification">0</span></a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle valign-middle" data-toggle="dropdown"><span class="glyphicon glyphicon-camera"></span>&nbsp; My Images</a>
                <ul class="dropdown-menu">
                    <li><a href="#">All images</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Album 1</a></li>
                    <li><a href="#">Album 2</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    {% if S_SERVICE_USED == 'facebook' %}
                        <img src="https://graph.facebook.com/{{ S_USERNAME }}/picture" height="24px" class="img-circle avatar" alt="Avatar">
                    {% else %}
                        {% if S_USER_AVATAR != '' %}<img src="{{ S_AVATAR_PATH }}" id="my_avatar" height="24px" class="img-circle avatar" alt="Avatar">{% else %}<span class="glyphicon glyphicon-user"></span>{% endif %}
                    {% endif %}
                    &nbsp;<span class="{% if S_SERVICE_USED == 'facebook' or S_USER_AVATAR != '' %}valign-middle{% endif %}">{{ S_USERNAME }}</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{{ S_WEB_PATH }}user/{{ S_USERNAME }}"><span class="glyphicon glyphicon-user"></span> Me</a></li>
                    <li><a href="#settings" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                    {% if S_SERVICE_USED != 'facebook' and S_SERVICE_USED != 'twitter' %}<li><a href="#profile" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a></li>{% endif %}
                    <li><a href="{{ S_WEB_PATH }}user/do/logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                </ul>
            </li>
            {% endif %} 
        </ul>   
    </div>
</nav><!-- Navigation -->

除此之外的任何事情，我都没有触及过。我已尝试在.navbar-default中添加此内容来修复此问题：

@media (max-width: 768px){
    max-height: none;
    height: auto;
}

这没有做任何事情。

任何帮助都会受到高度赞赏，因为看到这种情况并且不知道它来自何处，这真的令人恼火。这可能是Bootstrap的问题吗？我对此表示怀疑。

2 个答案:

答案 0 :(得分：6)

导致滚动的.navbar-default最大高度不是。这是.navbar-collapse。

在不添加任何样式且仅使用Bootstrap的默认情况下，我可以看到滚动条，它是由此引起的：

.navbar-collapse {
  max-height: 340px;  /* *** THIS IS YOUR ISSUE *** */
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch;
}

.navbar-collapse.in {
  overflow-y: auto;
}

<强> A demo of the scrollbar showing.

所以你可以通过覆盖你的风格来解决这个问题：

.navbar-collapse {
  max-height: none; 
}

<强> A demo with scrollbar gone.

最后，关于你的头像在大屏幕上太大，如果你真的想使用你的媒体查询，你会这样做：

.navbar-default {
  max-height: 51px; 
}

.navbar-collapse {
  max-height: none; 
}

@media (max-width: 768px){
  .navbar-default {
    max-height: none;
  }
}

<强> A demo of media query working.

虽然老实说最后一个例子但我不确定你为什么不设置max-height on the avatar like this。

答案 1 :(得分：0)

而不是设置max-height：auto，只需取出max-height：51px;样式并保持高度：auto。容器应扩展以适合您的内容。

相关问题
最新问题