MakeBootstrap列从屏幕右侧进入-MakeBootstrapcolumncomeinfromrightsideofscreen

I want to have a column pane come in from the right when a button is clicked. This column will begin completely off the screen and stop in the middle of my page. So far I've tried things like:

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

along with this Javascript that gets called when a button is clicked:

以及点击按钮时调用的这个Javascript:

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

My problem right now is that I cannot get the previewPane completely to the side of the page. Offsetting my column by 12 doesn't push it to the right enough to get it off the screen entirely. Is there any methods in bootstrap that would allow me to do this?

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

1 个解决方案

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

}