Twitter bootstrap 从画布引导-如果少于侧边栏的内容导致滚动混乱

我正在使用Bootstrap的3.2.0非画布布局，位于-

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

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

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

切换导航

你好，世界！
这是一个展示引导中非画布布局模式潜力的示例。尝试一些响应范围视口大小以查看其实际效果

标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui



&抄袭；公司2014

---

不管主要内容有多长，是否仍有可靠的工具条工作？

在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')
});

---

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')
});

---

我遇到了这个问题。在尝试了许多变通方法之后，我发现删除double overflow-x对我很有效

因此，只需从以下文件中删除正文或html：

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

---

我宁愿保持身材。

我遇到了这个确切的问题。在尝试了许多变通方法之后，我发现删除double overflow-x对我很有效

因此，只需从以下文件中删除正文或html：

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

---

我宁愿保留正文。

以下是我们必须遵循的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>

.职位{
位置：相对位置；
左边缘：-50%；
}

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>

$（文档）.ready（函数（）{
jQuery（“[data toggle=offcanvas]”）。单击（函数（）{
//添加此行以更改侧边栏的位置
jQuery（'.row offcanvas'）.hasClass（“活动”）？jQuery（'.sidebar offcanvas'）.css（“位置”，“绝对”）：jQuery（'.sidebar offcanvas'）.css（“位置”，“相对”）；
//末模迪夫
$（“.content div”）.toggleClass（“position”）；
jQuery（'.row offcanvas'）.toggleClass（'active'））
});
});

这就是我们必须使用的。现在我解释一下。当我们点击按钮时，offcanvas div将添加css相对位置。另一个contentdiv将切换一个css将定位的类：relative；左边缘：-50%

我制作了从左到右和从右到左两种类型的非画布。如果你愿意，你可以从我的dropbox下载这两个代码。多谢各位

---

以下是我们必须遵循的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>

.职位{
位置：相对位置；
左边缘：-50%；
}

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>

$（文档）.ready（函数（）{
jQuery（“[data toggle=offcanvas]”）。单击（函数（）{
//添加此行以更改侧边栏的位置
jQuery（'.row offcanvas'）.hasClass（“活动”）？jQuery（'.sidebar offcanvas'）.css（“位置”，“绝对”）：jQuery（'.sidebar offcanvas'）.css（“位置”，“相对”）；
//末模迪夫
$（“.content div”）.toggleClass（“position”）；
jQuery（'.row offcanvas'）.toggleClass（'active'））
});
});

这就是我们必须使用的。现在我解释一下。当我们点击按钮时，offcanvas div将添加css相对位置。另一个contentdiv将切换一个css将定位的类：relative；左边缘：-50%

我制作了从左到右和从右到左两种类型的非画布。如果你愿意，你可以从我的dropbox下载这两个代码。多谢各位

你能重新创建你的电脑吗