栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

修复了流畅的Twitter Bootstrap 2.0中的侧边栏导航

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

修复了流畅的Twitter Bootstrap 2.0中的侧边栏导航

注意:
有一个引导jQuery插件可以执行此操作,并且在写了此答案(大约两年前)后的几个版本中引入了更多功能,称为Affix。仅当您使用Bootstrap2.0.4或更低版本时,此答案才适用。


是的,只需为边栏创建一个新的固定类,然后向您的内容div添加一个偏移类,以弥补左边距,如下所示:

CSS

.sidebar-nav-fixed {    padding: 9px 0;    position:fixed;    left:20px;    top:60px;    width:250px;}.row-fluid > .span-fixed-sidebar {    margin-left: 290px;}

更新资料

修复了我的演示以支持响应式引导工作表,现在它具有引导程序的响应功能。

注意:此演示与顶部固定的导航栏一起流动,因此两个元素都将

position:static
在屏幕调整大小时出现,我在下面放置了另一个演示,该演示保持了固定的侧边栏,直到屏幕下降至移动视图为止。

CSS

.sidebar-nav-fixed {     position:fixed;     top:60px;     width:21.97%; } @media (max-width: 767px) {     .sidebar-nav-fixed {         width:auto;     } } @media (max-width: 979px) {     .sidebar-nav-fixed {         position:static;        width: auto;     } }

HTML

<div ><div > <div >   <div >    ...   </div><!--/.well --> </div><!--/span--> <div >    ... </div><!--/span--></div><!--/row--></div><!--/.fluid-container-->

小提示:固定侧边栏的宽度大约有10px/1%的差异,这是由于以下事实:由于它是固定的,因此不继承span3容器div的宽度,因此我不得不提出一个宽度。足够近了。

如果要保持侧边栏固定,直到网格下降以显示小屏幕/移动视图,这是另一种方法。

CSS

.sidebar-nav-fixed {    position:fixed;    top:60px;    width:21.97%;}@media (max-width: 767px) {    .sidebar-nav-fixed {        position:static;        width:auto;    }}@media (max-width: 979px) {    .sidebar-nav-fixed {        top:70px;    }}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/420834.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号