Jasny Bootstrap change

Jasny Bootstrap change

本文关键字：change Bootstrap Jasny      更新时间：2023-09-26

我正在寻找我的管理模板的侧边栏，我想使用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/

提前感谢

我是用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/

您只需要更改类"container"的padding-left属性。

相关文章：