Jasny Bootstrap變化

Question

我正在尋找一個側欄到我的管理模板，我想用jasnybootstrap。 我的目標是調整內容的大小，不要翻譯出屏幕。

類似的效果是這樣的http://startbootstrap.com/template-overviews/simple-sidebar/

我希望有人能告訴我，如果能夠獲得這樣的結果。

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation"> 
    <a class="navmenu-brand" href="#">Brand</a> 
    <ul class="nav navmenu-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    </ul> 
</nav> 
<div class="navbar navbar-default navbar-fixed-top"> 
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <h1>Jasny Bootstrap starter template</h1> 

<p class="lead">Use this fiddle to demonstrate an issue with Jasny Bootstrap or to show an example using Jasny Bootstrap.</p> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/k9K5d/13/

在此先感謝

Answer 1

我一直在使用CSS做到了。

#myNavmenu ~ .container { 
    padding-left: 10px; 
} 

#myNavmenu.canvas-slid ~ .container { 
    padding-left: 320px; 
} 

http://jsfiddle.net/k9K5d/14/

我有它使用jQuery做。

http://jsfiddle.net/k9K5d/15/ 

// JS 

$(".navbar-toggle").click(function(e) { 
    e.preventDefault(); 
    $(".container").toggleClass("slide"); 
}); 

// CSS 

.container.slide { 
    padding-left: 10px; 
} 

.container { 
    padding-left: 320px; 
} 

http://jsfiddle.net/k9K5d/15/

你只需要爲類「容器」中填充左屬性的變化。