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

时间 2019-12-06

标签 bootstrap nav container 中用 affix 宽度不满容器解决方案栏目 Bootstarp 繁體版

原文原文链接

这是个人Bootstrap页面头，我要作的是，当滚动页面到网页标题栏以后，把导航栏固定在页面顶端，适用了Bootstrap的Affix组件； css

这是个人css片断，个人网页标题高度为80px，当导航栏滚动了80px后，因为以下css设定了top: 0px， html

因此会自定固定在页头； jquery

/* 不加上这一行, 当滚动到导航条时，仍然会留出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 的宽度； code

$('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，收工 htm