html - 带有一些全宽容器和一些普通容器的 Twitter bootstrap 3 中的底部菜单

Question

我正在尝试使用 Bootstrap 构建我们的设计师要求的布局。布局是这样的:

有两个栏使用整个浏览器宽度。主容器和页脚菜单使用固定容器。

我设法使用下面的代码重现了这个布局(以及较小屏幕的布局)，但是当屏幕没有足够的高度来适应主容器和页脚菜单时就会出现问题。在这种情况下，菜单覆盖在主容器上。

我做错了什么，只有当主容器没有足够的垂直空间时，我怎么才能让页脚菜单溢出屏幕？

这是 HTML 代码:

<!-- Top decorative bar 3 pixels -->
<div class="container-fluid">
    <div class="row header-full"></div>
</div>
<!-- Page content vertically centered -->
<div class="container main-container">
    <div class="main-container-wrapper">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 logo">
                <img src="images/logo-home.jpg" class="img-responsive center-block" alt="">
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2 search-row">
                <div class="row">
                    <div class="col-sm-9">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search term" name="search" id="search" value="" aria-describedby="helpBlock" />
                            <span id="helpBlock" class="help-block">(Ex.: Lorem ipsum)</span>
                        </div>
                        <div class="row">
                            <div class="hidden-xs col-sm-4 col-lg-3 col-lg-offset-1 options-row-search">
                                <a href=""class="btn btn-default btn-sm search-kind">Option A</a>
                            </div>
                            <div class="hidden-xs col-sm-4 col-lg-3 options-row-search">
                                <a href=""class="btn btn-default btn-sm search-kind">Option B</a>
                            </div>
                            <div class="hidden-xs col-sm-4 col-lg-3 options-row-search">
                                <a href=""class="btn btn-default btn-sm search-kind">Option C</a>
                            </div>
                            <div class="col-xs-12">
                                <div class="hidden-sm hidden-md hidden-lg other-search dropdown">
                                    <button type="button" class="btn btn-default btn-toggle button-text" data-toggle="dropdown" aria-expanded="false">
                                        Other Search <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Option A</a></li>
                                        <li><a href="#">Option B</a></li>
                                        <li><a href="#">Option C</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <a href="#" class="btn btn-default search">Search</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- footer decorative bar 6 pixels -->
<div class="container-fluid">
    <div class="row footer-full"></div>
</div>
<!-- footer menu -->
<div class="container">
    <div class="row footer">
        <div class="col-xs-12 footer-links-wrapper">
            <a class="footer-link" href="">About us</a> |
            <a class="footer-link" href="">Colaborate</a> |
            <a class="footer-link" href="">FAQ</a> |
            <a class="footer-link" href="">Curiosity</a>   |
            <a class="footer-link" href="">Blog</a>   |
            <a class="footer-link" href="">Contact</a>   |
            <div class="footer-link"><img src="images/dummy-facebook.jpg" alt="" /></div>
        </div>
    </div>
</div>

这是 CSS(为了简化，我删除了 xs、sm 和 md 媒体查询):

.header-full, .footer-full{
    background-color: #318fbc;
}

.main-container{
    position: relative;
    height: 100%;
}

.main-container-wrapper{
    width: 100%;
    position: absolute;
}

.footer, .footer a{
    color: #a9a9b5;
}

#search{
    background-color: #f7f7f7;
    color: #a9a9af;
}

.search, .search-kind{
    background: #2496c4;
    color: #fff;
    border: 1px solid #1c85b6;
    text-shadow: none;
}

.search:hover, .search-kind:hover{
    background: #1c85b6;
    color: #fff;
    border: 1px solid #858585;
    text-shadow: none;
}

.footer-links-wrapper{
    text-align: center;
}

.footer-link{
    display: inline-block;
    vertical-align: middle;
}

.options-row-search{
    text-align: center;
}

.dropdown button{
    width: 100%;
    padding-left: 5px;
    padding-right: 20px;
    text-align: left;
    text-shadow: none;
}

.dropdown button .buttontext{
    display: block;
    overflow: hidden;
    max-width: 100%;
    text-shadow: none;
}

.dropdown button .caret{
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: -2px;
    color: #777;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #777;
}

.dropdown-menu{
    max-height: 300px;
    width: 100%;
    overflow: scroll;
    overflow-x: hidden;
}

.help-block{
    font-size: 0.812em;
    padding-left: 1em;
    color: #aaa;
    font-style: italic;
}

/* lg */
@media (min-width: 1200px){
    .header-full{
        height: 3px;
    }

    .footer-full{
        height: 6px;
    }

    .main-container{
        margin-top: -3px;
        margin-bottom: -61px;
    }

    .main-container-wrapper{
        top: 50%;
        margin-top: -136px;
    }

    .footer{
        height: 52px;
        line-height: 52px;
    }

    .footer, .footer a{
        font-size: 14px;
    }

    .logo{
        margin-bottom: 2em;
    }

    #search{
        font-size: 20px;
        height: 50px;
    }

    .search{
        width: 120px;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        padding: 0;
    }

    .search-kind{
        width: 124px;
        height: 28px;
        font-size: 13px;
        line-height: 28px;
        padding: 0;
        margin-top: 1em;
        margin-right: 0.5em;
    }
}

* 更新 *忘了说即使内容太短，页脚菜单也必须在页面底部。当contente比较大的时候，可以跟在content的末尾。

这是我今天所拥有的(删除客户信息的真实屏幕截图)。两个装饰条是蓝色的。

这就是窗口高度太小的问题。

Answer 1

由于主要内容的宽度是固定的，所以整个区域都需要包含在包装器中。这意味着您的页脚菜单也将位于包装内，而不是位于包装外。

Bootstrap 3 有固定的布局，为什么不用呢？它允许您仍然使用行和列，并且响应迅速。

Bootply 样机:http://www.bootply.com/df00zXUlI7

根据我对您问题的理解，这与您要查找的内容非常接近。它是固定布局、响应式、使用 Bootstrap 而不是 hack。

您使用的是固定布局，但查看您的图像，您不必使用 Bootstrap 的固定布局版本。固定布局适用于不占用整个页面且宽度固定的网站。整个站点位于一个 div 容器中，960 像素宽位于页面中心。您正在做的是创建一个看起来像 Google 的页面。所以你可以使用 100% 的宽度，让你的内容居中，没有边框，达到同样的效果。无论哪种方式都可以，但只是针对您的情况说明，不必修复。

对于页脚导航，请使用 Bootstrap 的粘性页脚。当 Bootstrap 自带我们需要的东西时，不需要自定义 CSS hack。 http://getbootstrap.com/examples/sticky-footer-navbar/使用它，它将创建您的底部导航。当然，您必须将其中的内容居中以匹配您的模型。

对于顶部的蓝色条，它可以附加到 body{} 样式或您使用的第一个 100% 包装器。对于底部的蓝色条，它可能是粘性页脚上的顶部边框。真的不需要创建一个蓝色的 div 来实现它。最好的办法是使用 CSS(边框、背景图像、渐变等)来完成它。

例如，将蓝色添加到 Bootstrap 粘性页脚的底部页脚 CSS:

footer { border-top: 2px solid blue; }

在您的自定义 style.css 文件中，您可以定义已经定义的规则(由 bootstrap 定义)来覆盖 CSS，或添加到它。粘性导航没有边框，因此将上面的页脚 CSS 添加到您自己的样式表会在页脚粘性导航的顶部添加一个 2 像素宽的蓝色边框。