gpt4 book ai didi

javascript - Jasny Bootstrap 更改

转载 作者:太空宇宙 更新时间:2023-11-03 23:27:55 24 4
gpt4 key购买 nike

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

您只需更改“容器”类的 padding-left 属性即可。

关于javascript - Jasny Bootstrap 更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26231116/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com