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

标签 html css twitter-bootstrap

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

layout wireframe

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

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

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

这是 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;
    }
}

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

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

actual screenshot

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

enter image description here

最佳答案

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

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

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

根据我对您问题的理解，这与您正在寻找的内容非常接近。它是固定布局、响应式的，并且使用 Bootstrap 而不是黑客。

您使用的是固定布局，但查看您的图像，您不必使用 Bootstrap 的固定布局版本。固定布局适用于不占据整个页面且宽度固定的网站。整个网站位于一个 div 容器中，宽度为 960 像素，位于页面中心。你正在做的是创建一个看起来像谷歌的页面。因此，您可以使用 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 像素宽的蓝色边框。

关于html - Twitter bootstrap 3 中的底部菜单，带有一些全宽容器和一些普通容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28142401/

上一篇：html - 当div具有 float 样式时，如何使其父级的div居中

下一篇：html - 带边框的透明文本 html/css

相关文章：

javascript - 数据列表获取选定值和自定义属性(无事件)

html - 如何安抚 Chrome 的输入显示(图像和文本输入)？

html - 将图像高度设置为容器高度并保持纵横比

javascript - 如何防止在头部从服务器加载我的真实图像时出现损坏的图像

css - Qlik Sense Mashup 问题 - 进行选择时列表框工具栏不显示

Javascript - 如何清除 DIV 中的先前值？

html - HTML 表格内的输入文本溢出

css - 空 div 的高度为 100%

html - 使用比容器中文本大的图像居中文本

twitter-bootstrap - Bootstrap Card 到新线路响应

©2024 IT工具网  联系我们