文档章节

Bootstrap中nav在container中用affix时,nav宽度撑不满容器的解决方案

Big_BoBo
 Big_BoBo
发布于 2015/03/30 13:59
字数 348
阅读 183
收藏 0

    这是我的Bootstrap页面头,我要做的是,当滚动页面到网页标题栏之后,把导航栏固定在页面顶端,适用了Bootstrap的Affix组件;

    这是我的css片段,我的网页标题高度为80px,当导航栏滚动了80px后,由于如下css设定了top: 0px,

所以会自定固定在页头;

/* 不加上这一行, 当滚动到导航条时,仍然会留出data-offset-top设定的像素的高度 */
div.head.affix{
    top: 0px; /* Set the top position of pinned element */
}



    这是我的页面部分代码;
<body>
		<div class="container">
			<div style="height: 80px">
			  <h1>网站标题 <small> 网站副标题</small></h1>
			</div>
			
			<div class="head " data-spy="affix" data-offset-top="80">
			
				<!-- 默认 navbar navbar-default navbar-fixed-top ; 反色导航条 navbar navbar-inverse navbar-fixed-top --> 
				<nav class="navbar navbar-default" role="navigation">

    这是滚动到80px后的效果;

    发现导航的宽度,自动适应了内容的宽度,这当然不是我想要的效果,所以我必须借助jquery把导航的宽度设置为container 的宽度;

$('div.head')
	    	  .on('affix.bs.affix', function () {
	    	    var margin =  parseInt($('.container').css("margin-right"));
	    	    var padding = parseInt($('.container').css("padding-right"));
	    	    $("div.head").css("right",margin+padding);
	    	    $("div.head").width($(".container").width());
	    	  })
	    	  .on('affix-top.bs.affix', function () {
	    	    $("div.head").css("right","0px");
	    	    console.log('在滚动到top的高度时,设定div head的宽度为container的宽度:'+$(".container").width());
	    	    $("div.head").width($(".container").width());
	    	  });



    下面来看下效果:

    完美达到我想要的效果,duang,收工



© 著作权归作者所有

共有 人打赏支持
Big_BoBo
粉丝 53
博文 54
码字总数 22137
作品 0
杭州
高级程序员
bootstrap 3, 全局样式、组件 学习总结。

全局样式css 概览 移动设备优先 布局容器 栅格系统 .row > .col- 列必须包含在行内, 默认12列 根据媒体查询将列前缀分为4种 列偏移 col-lg-offset- 表示向右偏移列。 排版 对齐: .text-left...

horacerain
2016/11/02
50
0
BootStrap

bootstrap下载: 英文网址: 中文网址: 选择编译压缩版本,可下载到本地使用,也可网上引用CDN bootstrap应用 - 引用框架(基础)与注意点: bootstrap学习 文中带 . 的标号为选择器,如.le...

大仁孙
2016/07/13
37
0
bootstrap3 - 自适应导航

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>自适应导航</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/> <link href="......

iNiL0119
2015/09/28
980
0
Bootstrap 下拉菜单

一.一个简单的下拉菜单 1.创建一个<div class="dropDown">的容器 //包裹素也可不为div 但一定要有class .dropDown 2.在容器内添加 <button type="button" class="btn dropdown-toggle" data......

奋斗的小芋头
2016/11/17
22
0
Bootstrap笔记

.navbar——设置nav元素为导航条组件;//已用 .navbar-default——指定导航条组件为默认主题;//已用 .navbar-inverse——指定导航条组件为黑色主题; .navbar-fixed-top——设置导航条组件固...

路霸X
2017/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部