使Bootstrap列从屏幕右侧进入

Question

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:

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

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

$("#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?

Answer 1

I do this all the time. BS3 already packages this.

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

You can position your trigger button where ever you want. Make sure you can click it when the drawer opens.

To get the full width drawer effect as you desire, change a few default BS3 styles.

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

}