javascript - 使 Bootstrap 列从屏幕右侧进入

Question

我希望在单击按钮时从右侧出现一个列 Pane 。此专栏将完全从屏幕开始，并在我的页面中间停止。到目前为止，我已经尝试过类似的事情:

<div class="col-sm-6 col-sm-offset-12">

连同单击按钮时调用的 javascript:

$("#previewPane").toggleClass("col-sm-offset-12");

我现在的问题是我无法将 previewPane 完全放在页面的一侧。将我的列偏移 12 并不能将它向右推到足以让它完全离开屏幕的程度。 bootstrap 中是否有任何方法可以让我执行此操作？

Answer 1

我经常这样做。 BS3 已经打包了这个。

http://getbootstrap.com/examples/offcanvas/

您可以将触发按钮放在任何您想要的位置。确保您可以在抽屉打开时点击它。

要获得所需的全宽抽屉效果，请更改一些默认的 BS3 样式。

@media screen and (max-width: 767px) {

    .row-offcanvas-right .sidebar-offcanvas {
      right: -100%;
    }

    .sidebar-offcanvas {
      position: absolute;
      top: 0;
      width: 100%;
    }

    .row-offcanvas-right.active {
      right: 100%;
      margin-left: 0;
      margin-right: 0;
    }

}