Question

我希望在单击按钮时从右侧进入列窗格。此列将完全从屏幕开始，并停在我的页面中间。到目前为止，我已经尝试过这样的事情：

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

以及点击按钮时调用的这个javascript：

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

我现在的问题是我无法将previewPane完全放到页面的一侧。将我的专栏偏移12点并不能将其推到正确的位置以使其完全脱离屏幕。引导程序中是否有任何方法可以让我这样做？

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

}

使Bootstrap列从屏幕右侧进入

1 个答案: