Bootstrap Off Canvas - 如果内容少于侧边栏弄乱了滚动 [英] Bootstrap Off Canvas - if content less than sidebar messed up scrolling

问题描述

我正在使用 Bootstrap 的 3.2.0 Off Canvas 布局，位于 - http://getbootstrap.com/examples/画布/

我知道这是一个常见问题，如果侧边栏的内容比主容器的内容长，滚动条不再正确滚动内容(侧边栏和主栏)而是切断侧边栏并放置导航栏下方的滚动条.

我可以通过采用上述模板并在侧边栏添加额外链接同时在主容器中放置较少内容来重现此问题，例如:

<div class="row row-offcanvas row-offcanvas-right"><div class="col-xs-12 col-sm-9"><p class="右拉可见-xs"><button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">切换导航</button></p><div class="jumbotron"><h1>你好，世界！</h1><p>这是一个示例，展示了 Bootstrap 中 offcanvas 布局模式的潜力.尝试一些响应范围的视口大小以查看其实际效果.</p>
<div class="row"><div class="col-12 col-sm-12 col-lg-12"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情&raquo;</a></p></div><!--/span--></div><!--/row--></div><!--/span--><div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"><div class="list-group"><a href="#" class="list-group-item active">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a>

<div class="list-group"><a href="#" class="list-group-item active">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a>

<div class="list-group"><a href="#" class="list-group-item active">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a>

</div><!--/span--></div><!--/row--><小时><页脚><p>&copy;公司 2014</p></页脚></div><!--/.container-->

不管主要内容有多长，有没有办法让侧边栏可靠地工作?

解决方案

offcanvas.j 中的快速修复:

jQuery('[data-toggle=offcanvas]').click(function () {//添加这一行来改变侧边栏的位置jQuery('.row-offcanvas').hasClass("active") ?jQuery('.sidebar-offcanvas').css("position","absolute") : jQuery('.sidebar-offcanvas').css("position","re​​lative");//结束修改jQuery('.row-offcanvas').toggleClass('active')});

I am using Bootstrap's 3.2.0 Off Canvas layout located at - http://getbootstrap.com/examples/offcanvas/

I know this is a common issue that if the content of the sidebar is longer than the content of the main container that the scroll bar no longer scrolls the content properly (both sidebar and main) but cuts off the sidebar and also places the scrollbar below the navbar.

I can reproduce this problem by taking the above template and adding additional links to the sidebar while putting less content in the main container, example:

<div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
            <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
            </p>
            <div class="jumbotron">
                <h1>Hello, world!</h1>
                <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
            </div>
            <div class="row">
                <div class="col-12 col-sm-12 col-lg-12">
                    <h2>Heading</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
                </div><!--/span-->
            </div><!--/row-->
        </div><!--/span-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="list-group">
                <a href="#" class="list-group-item active">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>     
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item active">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item active">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
            </div>
        </div><!--/span-->
    </div><!--/row-->

    <hr>

    <footer>
        <p>&copy; Company 2014</p>
    </footer>

</div><!--/.container-->

Is there anyway to reliably have the sidebar working no matter how long the main content is?

解决方案

a quick fix in offcanvas.j:

jQuery('[data-toggle=offcanvas]').click(function () {

// add this line to change the position of sidebar
jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") :        jQuery('.sidebar-offcanvas').css("position","relative");  
// end modif      

jQuery('.row-offcanvas').toggleClass('active')
});

这篇关于Bootstrap Off Canvas - 如果内容少于侧边栏弄乱了滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！