Question

我正在开发一个小项目，其前端是使用最新版本的Bootstrap构建的。我有我的主页部分，但我坚持让他们按照我想要的方式行事。

<body>
    <div class="container-fluid max-height">
        <div class="row max-height">
            <div class="col-md-2 col-sm-12 col-xs-12 site-nav">
                <div class="row">
                    <div class="brand">
                        <a href="index.html">
                            <img src="http://placehold.it/200x320" class="img-responsive" alt="logo" />
                        </a>
                    </div><!-- .brand -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
                </div><!-- .row -->
            </div><!-- .col-md-2 -->
            <div class="col-md-10 col-sm-12 site-content">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12 info-bar">
                        <h2>SOME TITLE</h2>
                    </div><!-- .col-md-12 -->

                    <div class="col-md-6">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>

                        <p>Quisque ligula ex, pellentesque sit amet ligula non, ullamcorper egestas nulla. Sed in sapien ut velit finibus scelerisque ac quis purus. Etiam libero nibh, euismod id augue quis, condimentum aliquam diam. Integer faucibus vitae velit sed iaculis. Praesent laoreet neque est, at pharetra nunc scelerisque sit amet. Curabitur fringilla ex a quam commodo, quis hendrerit ipsum ullamcorper. Vestibulum pretium leo odio, feugiat tristique augue laoreet id. Aenean lobortis, mi sit amet pellentesque condimentum, lectus velit gravida diam, a consequat arcu magna eget diam. Phasellus in iaculis dolor, nec rhoncus dolor.</p>
                    </div><!-- .col-md-6 -->
                    <div class="col-md-6">
                        <div class="article-photo">
                            <img src="http://placehold.it/500x350" class="img-responsive" alt="article" />
                        </div>
                    </div>
                </div><!-- .row -->
            </div><!-- .col-md-10 -->
        </div><!-- .row -->
    </div><!-- .container-fluid -->
</body>

这是JSFiddle。

我希望标题栏和侧边栏保持原样，不要滚动内容。我想要滚动的唯一内容是内容（蓝色）。

如何在Bootstrap中使用CSS完全实现这一目标？

Answer 1

如果该顶部是动态页面的一部分，我会读到Bootstrap Navbar（http://getbootstrap.com/components/#navbar）。一个非常强大的工具，比页面的简单滚动样式更具动态性。

对于当前小提琴的简单答案，您需要将滚动设置为溢出并在要滚动的div上设置固定高度。将这些css属性添加到滚动div中可以实现您所描述的内容。

style="overflow: scroll; max-height: 100px"

在这里小提琴：http://jsfiddle.net/xb6k5vth/1/

仅使用Bootstrap滚动内容区域

1 个答案: