文章/答案/技术大牛

发布

社区首页 >问答首页 >引导跨度不适用于全高侧边栏

问引导跨度不适用于全高侧边栏
EN

Stack Overflow用户

提问于 2013-03-10 11:42:45

回答 1查看 475关注 0票数 0

我正在尝试在bootstrap中创建一个响应式布局，它有一个全高的侧边栏。我让响应式的部分工作了，但唯一的问题是-跨度的间距似乎不能很好地结合在一起。

在右侧--主要内容--它不能适应屏幕的其余部分。此外，当浏览器变得太小时--主要内容实际上会被侧边栏部分隐藏。

我是不是在跨度上做错了什么？如果我从.sidebar中移除position: absolute;，那么整个.content.片段就会滑到侧边栏的下面--但是侧边栏不再是全高的，并且内容仍然不能均匀地填满屏幕的其余部分。似乎不可能让它正常工作，但我想使用bootstrap来方便地不必重做所有集成的CSS/JS。

示例：

CSS

html {
    height: 100%;
}

.sidebar {
    background: #333;
    margin: 0;
    padding: 3em 2em;
    height: 100%;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    min-height: 100%;
    position: absolute;
}

.sidebar .logo { margin-bottom: 3em; }

.content {
    margin: 5em;
}

HTML

<body>
    <div class="row">
        <!-- Navigation for small screens -->
        <div class="navbar navbar-inverse hidden-desktop">
            <div class="navbar-inner">
                <a class="brand" href="/">Home Link</a>
                <ul class="nav">
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

        <!-- Navigation for larger screens -->
        <div class="span3 hidden-phone hidden-tablet">
            <div class="span3 sidebar">
                <div class="logo"><a class="logo-title" href="/">Home Link</a></div>

                <ul class="nav nav-pills nav-stacked">
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <div class="span9 content">

<div class="span5">
    <div class="page-header">
        <h1>Hello. <small>This is.</small></h1>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.

Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>
</div>
<div class="span3">
    <div class="page-header">
        <h1>Second Header. <small>Not working.</small></h1>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.

    Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>

</div>

        </div>
    </div>



</body>

css

twitter-bootstrap

responsive-design

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-10 12:05:23

您已经将侧边栏设置为绝对，为什么还要为height: 100%而烦恼呢？简单地添加top:0; bottom:0会更容易。

你的侧边栏之所以会像那样滑过内容，是因为侧边栏的绝对定位。如果你想防止这种情况发生，我建议在你的侧边栏类中设置一个定义的宽度(比如，240px)，然后将内容的CSS改为如下所示：

.content {
    padding: 5em;
    left: 240px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
}

这应该会适当地约束你的内容，使其在任何情况下都不会滑到你的侧边栏下面。然后，为了使其具有适当的响应性，请在屏幕缩小时向下调整侧边栏的字体大小和宽度，并减小.content的left属性以匹配侧边栏的宽度。

这就是你要找的吗？

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15318660

复制

相似问题

问引导跨度不适用于全高侧边栏
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导跨度不适用于全高侧边栏EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导跨度不适用于全高侧边栏
EN