Jasny Bootstrap改变 [英] Jasny Bootstrap change

问题描述

我正在寻找一个侧边栏到我的管理模板，我想使用jasnybootstrap。
我的目标是调整内容的大小，不要翻译出屏幕。

类似的效果是此 http： //startbootstrap.com/template-overviews/simple-sidebar/

我希望有人能告诉我是否可以取得这样的结果。

 < nav id =myNavmenuclass =navmenu navmenu-default navmenu-fixed-left offcanvasrole = > 
< a class =navmenu-brandhref =＃> Brand< / a> 
< ul class =nav navmenu-nav> 
< li class =active>< a href =＃>首页< / a>< / li& 
< li>< a href =＃>链接< / a>< / li& 
< li>< a href =＃>链接< / a>< / li& 
< / ul> 
< / nav> 
< div class =navbar navbar-default navbar-fixed-top> 
< button type =buttonclass =navbar-toggledata-toggle =offcanvasdata-target =＃myNavmenudata-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初始模板< / h1> 
 
< p class =lead>使用这个小提琴演示Jasny Bootstrap的一个问题，或者使用Jasny Bootstrap显示一个例子。< / p& 
< / div> 
< / div> 
< / div> 
  

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

提前感谢

  #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/

您只需要在padding-left属性为'container'。

I was looking for a sidebar to my admin template and I wanted to use jasnybootstrap. My goal was to resize the content and do not translate out of the screen.

A similar effect is this http://startbootstrap.com/template-overviews/simple-sidebar/

I hope someone can tell me if it is possible to obtain such a result.

<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/

Thanks in advance

解决方案

I have made it using CSS.

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

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

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

I have made it using 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/

You just need to make a change in padding-left property for class 'container'.

这篇关于Jasny Bootstrap改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！