Bootstrap: Utrzymanie zawartości reaguje podczas korzystania z paska bocznego offcanvas

Question

Oto aktualny przykład praca, co mam zamiar na:

Fiddle.

To, co chciałbym zrobić:

Zawartość (tj. Trzy kręgi lub cokolwiek wewnątrz <section>) reaguje i zmienia rozmiar w celu dopasowania do aktualnego rozmiaru przeglądarki. Spróbuj sprawić, aby okno renderowania Fiddle było małe i zwróć uwagę, w jaki sposób kręgi się układają.

Teraz, gdy klikam menu hamburgerów, chcę, aby to samo się wydarzyło. Pojawiający się pasek boczny używa "offcanvas reveal" do wyświetlania, ale nie wywołuje reakcji responsywnej; po prostu przesuwa wszystkie treści bezpośrednio poza krawędź strony. Jak mogę temu zaradzić?

Oto mój kod:

<div id="wrapper"> 
    <header> 
     <div class="navmenu navmenu-default navmenu-fixed-right"> 
      <ul class="nav navmenu-nav"> 
       <li><a href="#">Link 1</a></li> 
       <li><a href="#">Link 2</a></li> 
       <li class="active"><a href="#">Link 3</a></li> 
       <li><a href="#">Link 4</a></li> 
      </ul> 
     </div> 
    </header> 
    <div class="canvas"> 
     <div class="navbar navbar-default navbar-fixed-top"> 
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="container"> 
      <!-- content here --> 
     </div> 
    </div> 
</div> 

Answer 1

od kwestii nie jest jasne, co szukasz. Stworzyłem możliwe rozwiązanie dla problemu

http://jsfiddle.net/5vqu5082/

.canvas-slid.canvas{ 
    width: 30%; 
} 

Answer 2

demo off menu płótnie jak opisałem w moich komentarzach pracy: http://jsfiddle.net/b6nopc8e/

HTML:

<div id="site-wrapper" class="container-fluid"> 
    <div id="menuToggle"> 
     <btn id="menuButton" class="main-menu btn btn-transparent pull-right" data-transition="boring"> 
     <i class="fa fa-ellipsis-v fa-3x"></i><br /> 
     <div>menu</div><div style="display:none;">close</div></btn> 
    </div> 
    <nav id="site-menu"> 
     <ul class="nav"> 
      <li><a href="/">Link</a></li> 
      <li><a href="/">Link</a></li> 
      <li><a href="/">Link</a></li> 
     </ul> 
    </nav> 
    <div id="site-canvas"> 
     <div id="mainbody" class="container-fluid"> 
      <div class="col-md-12"> 
       <h1>Hello World</h1> 
      </div> 
     </div> 
    </div> 
</div> 

CSS :

#menuButton { 
    width: 45px; 
    height: 45px; 
} 

/******************************** 
/* OFF CANVAS MENU 
/*******************************/ 
.show-nav #site-canvas { 
    transform: translateX(-330px);  
    transform: translate3d(-330px, 0, 0); 
    -webkit-transform: translateX(-330px);  
    -webkit-transform: translate3d(-330px, 0, 0); 
    -ms-transform: translateX(-330px);  
    -ms-transform: translate3d(-330px, 0, 0); 
} 

.boring #site-menu { 
    transform: translateX(0); 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translateX(0); 
    -webkit-transform: translate3d(0, 0, 0);  
    -ms-transform: translateX(0); 
    -ms-transform: translate3d(0, 0, 0);  
} 
.boring .show-nav #site-menu { 
    transition: 900ms ease all;  
    transform: translateX(-330px); 
    transform: translate3d(-330px, 0, 0); 
    -webkit-transform: translateX(-330px); 
    -webkit-transform: translate3d(-330px, 0, 0); 
    -ms-transform: translateX(-330px); 
    -ms-transform: translate3d(-330px, 0, 0); 
} 

.boring .show-nav #site-canvas { 
    transform: translateX(0); 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translateX(0); 
    -webkit-transform: translate3d(0, 0, 0); 
    -ms-transform: translateX(0); 
    -ms-transform: translate3d(0, 0, 0); 
} 

/******************************** 
/* WIREFRAME ELEMENTS 
/*******************************/ 
#site-wrapper { 
    box-sizing: border-box; 
    height: 100%; 
    width: 100%; 
} 

#menuToggle { 
    margin-right: 10px; 
    position: fixed; 
     top: 0; right: 0; 
    z-index: 888; 
} 

#site-menu { 
    background-color: #999; 
    height: 100%; 
    position: fixed; 
    top: 0; right: -330px; 
    width: 300px; 
    z-index: 777; 
} 

#site-menu:after { z-index: 999; } 

#site-canvas { 
    backface-visibility: hidden; 
    height: 100%; 
    transform: translateX(0); 
    transform: translate3d(0, 0, 0);  
    width: 100%; 
} 

JQUERY

/******************************** 
/* OFF CANVAS MENU 
/*******************************/ 
(function($){ 
    jQuery(document).ready(function(){ 
     var special = ['reveal', 'top', 'boring', 'perspective', 'extra-pop']; 
      // Toggle Nav on Click 
      $('.main-menu').click(function() { 
       var transitionClass = jQuery(this).data('transition'); 
       if ($.inArray(transitionClass, special) > -1) { 
        $('body').removeClass(); 
        $('body').addClass(transitionClass); 
       } else { 
        $('body').removeClass(); 
        $('#site-canvas').removeClass(); 
        $('#site-canvas').addClass(transitionClass); 
       } 
       $('#site-wrapper').toggleClass('show-nav'); 
       $('.main-menu i').toggleClass('fa-ellipsis-v fa-ellipsis-h'); 
       $(".main-menu div").html("menu"); 
       $('.main-menu div').toggle(); 
       return false; 
      }); 
    }); 
})(jQuery); 

/******************************** 
/* OFF CANVAS MENU HEIGHT 
/*******************************/ 
(function($){ 
    jQuery(document).ready(function(){ 
      $('#site-canvas').css({'min-height':($(window).height())+'px'}); 
      $(window).resize(function(){ 
       $('#site-canvas').css({'min-height':($(window).height())+'px'}); 
      }); 
    }); 
})(jQuery); 

Kilka uwag: To menu jest po prawej stronie. ale zmieniając numery tłumaczy, możesz przesunąć je w prawo. Jest to naprawdę szybkie, szorstkie rozłożenie, więc kod może być trochę brudny.