引导关帆布 - 如果不是侧边栏内容少搞砸滚动(Bootstrap Off Canvas - if c

我使用的引导的3.2.0关闭位于Canvas布局- http://getbootstrap.com/examples/offcanvas/

我知道这是一个常见的问题是，如果边栏的内容比滚动条不能正常滚动的内容（包括侧边栏和主），但切断栏主容器的内容较长，也放在下面的滚动条导航栏。

我可以通过采取上述模板，并添加额外的链接侧边栏，同时在主容器，例如把内容少重现此问题：

<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-->

反正是有可靠拥有侧栏，工作不管的主要内容是多久？

Answer 1:

速战速决的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')
});

Answer 2:

我遇到这种确切的问题。 大量尝试解决方法后，我只是发现，除去双溢出-X为我工作。

所以，简单地从删除任何一个机构或HTML：

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

我还是喜欢把身体。

Answer 3:

下面是HTML结构，我们必须遵循： -

            <div class="container">

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

                    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                        <ul>
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                          </ul>
                    </div>

                    <div class="col-xs-12 col-sm-9 content-div">
                        <p class="pull-left hide-p visible-xs">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
                  </p>
                    </div>
                </div>
            </div>

这就是CSS

 <style>
     .postion{
    position:relative;
    margin-left:-50%;
}
    </style>

jQuery代码会是这样。

    <script type="text/javascript">
        $(document).ready(function () {

          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      

        $(".content-div").toggleClass("postion");


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


        });
    </script>

所以，这就是我们必须使用。 现在我解释thing.When我们点击按钮的offcanvas格将增加相对CSS位置。 和其他内容的div将切换其CSS将是位置的一类：相对; 保证金左：-50％;

我做了两种类型offcanvas的左到右，右到左。 如果你愿意，你可以从我的Dropbox下载这些2代码。 谢谢。

https://www.dropbox.com/s/w5x4668edczif44/Bootstarap.zip?dl=0

文章来源: Bootstrap Off Canvas - if content less than sidebar messed up scrolling