使用词缀引导浮动导航菜单会导致滚动期间的大小调整。
使用词缀引导浮动导航菜单会导致滚动期间的大小调整。
提问于 2018-02-16 16:44:17
我的页面左边有导航菜单。我把菜单放在一个可折叠的容器里。当我滚动时，菜单的宽度会改变。我希望它占据整个网格列的位置。调整大小看起来很糟糕(当浏览器窗口很大时，情况会更糟)。
参见jsfiddle：https://jsfiddle.net/nndpwzvj/
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>Help Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ME" />
<meta name="doc-version" content="0.01 alpha" />
<!-- -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet"
integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous" />
<!-- -->
<!--
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/b2custom.css" rel="stylesheet" />
-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="http://www.b2ps.com" target="_blank">ACME</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Super Product Page<span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#">Documentation</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Dashboard??</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<!-- Left Nav Panel -->
<div class="col-xs-3">
<div data-spy="affix" data-offset-top="0" >
<div class="panel-group" role="tablist" id="b2navpanel" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="navPanel1">
<h4 class="panel-title">
<a href="#collapseOne" role="button" data-toggle="collapse" data-parent="#b2navpanel" aria-expanded="true"
aria-controls="collapseOne">Section 1</a>
</h4>
</div>
<div class="collapse panel-collapse in" role="tabpanel" id="collapseOne" aria-labelledby="navPanel1">
<div class="panel-body">
<ul>
<li><a href="#Chapter1Section">Chapter 1</a></li>
<li><a href="#Chapter2Section">Chapter 2</a></li>
<li><a href="#Chapter3Section">Chapter 3</a></li>
<li><a href="#Chapter4Section">Chapter 4</a></li>
<li><a href="#Chapter5Section">Chapter 5</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="navPanel2">
<h4 class="panel-title">
<a href="#collapseTwo" class="collapsed" role="button" data-toggle="collapse" data-parent="#b2navpanel"
aria-expanded="false" aria-controls="collapseTwo">Section 2</a>
</h4>
</div>
<div class="collapse panel-collapse" role="tabpanel" id="collapseTwo" aria-labelledby="navPanel2">
<div class="panel-body">
<ul>
<li><a href="#Chapter5Section">Chapter 5</a></li>
<li><a href="#Chapter6Section">Chapter 6</a></li>
<li><a href="#Chapter7Section">Chapter 7</a></li>
<li><a href="#Chapter8Section">Chapter 8</a></li>
<li><a href="#Chapter9Section">Chapter 9</a></li>
<li><a href="#Chapter10Section">Chapter 11</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="navPanel3">
<h4 class="panel-title">
<a href="#collapseThree" class="collapsed" role="button" data-toggle="collapse" data-parent="#b2navpanel"
aria-expanded="false" aria-controls="collapseThree">Section 3</a>
</h4>
</div>
<div class="collapse panel-collapse" role="tabpanel" id="collapseThree" aria-labelledby="navPanel3">
<div class="panel-body">
<ul>
<li><a href="#Chapter11Section">Chapter 11</a></li>
<li><a href="#Chapter12Section">Chapter 12</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Panel -->
<div class="col-xs-9">
<!-- Setup Content Section -->
<div>
<h1 id="Section1Section" class="bg-primary">Section 1</h1>
<h2 id="Chapter1Section">Chapter 1</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter2Section">Chapter 2</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter3Section">Chapter 3</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter8Section">Chapter 8</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter8Section">Chapter 8</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
<h2 id="Chapter9Section">Chapter 9</h2>
<p>
The Commodore 64, also known as the C64 or the CBM 64, is an 8-bit home computer introduced in January 1982 by Commodore International
(first shown at the Consumer Electronics Show, in Las Vegas, January 7–10, 1982).[5] It has been listed in the Guinness World Records
as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million
units.[3] Volume production started in early 1982, marketing in August for US$595 (equivalent to $1,509 in 2017).[7][8] Preceded by
the Commodore VIC-20 and Commodore PET, the C64 took its name from its 64 kilobytes (65,536 bytes) of RAM. It had superior sound and
graphical specifications compared to other earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more
advanced sound processor.
</p>
<p>
The C64 dominated the low-end computer market for most of the 1980s.[9] For a substantial period (1983–1986), the C64 had between 30%
and 40% share of the US market and two million units sold per year,[10] outselling the IBM PC compatibles, Apple Inc. computers, and
the Atari 8-bit family of computers. Sam Tramiel, a later Atari president and the son of Commodore's founder, said in a 1989 interview,
"When I was at Commodore we were building 400,000 C64s a month for a couple of years."[11] In the UK market, the C64 faced competition
from the BBC Micro and the ZX Spectrum,[12] but the C64 was still one of the two most popular computers in the UK.[13]
</p>
<p>
Part of the Commodore 64's success was its sale in regular retail stores instead of only electronics or computer hobbyist specialty
stores. Commodore produced many of its parts in-house to control costs, including custom integrated circuit chips from MOS Technology.
It has been compared to the Ford Model T automobile for its role in bringing a new technology to middle-class households via creative
and affordable mass-production.[14] Approximately 10,000 commercial software titles have been made for the Commodore 64 including
development tools, office productivity applications, and video games.[15] C64 emulators allow anyone with a modern computer, or a
compatible video game console, to run these programs today. The C64 is also credited with popularizing the computer demoscene and is
still used today by some computer hobbyists.[16] In 2011, 17 years after it was taken off the market, research showed that brand
recognition for the model was still at 87%.[6]
</p>
</div>
</div>
</div>
</div>
<div style="width: 100%; height: 75px;"></div>
<!-- Page Footer -->
<footer class="b2pagefooter">
<p>Copyright 2018 B2PS</p>
</footer>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></div>
<script src="js/bootstrap.min.js"></script>
-->
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
<!--
<script>
$(document).ready(function () {
$('.accordion').on('shown hidden', function () {
$('body').scrollspy('refresh');
});
});
</script>
-->
<!-- -->
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-16 17:56:21
使用affix events和resize event更新affix container width
尝尝这个
检查演示here
HTML
<!-- Left Nav Panel -->
<div class="col-xs-4 col-sm-3">
<!-- Inner Content -->
</div>
<!-- Content Panel -->
<div class="col-xs-8 col-sm-9">
<!-- Inner Content -->
</div>联署材料：
$(function() {
function changeAffixBoxWidth() {
let getParentWidth = $(".affix-side-section").parent().width();
$(".affix-side-section").css({
width: getParentWidth
});
}
$(window).on("resize", function() {
changeAffixBoxWidth();
});
$(".affix-side-section").on("affixed.bs.affix", function() {
changeAffixBoxWidth();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48831291
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号