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