使用引导程序容器时，粘滞导航栏增加到100％?
使用引导程序容器时，粘滞导航栏增加到100％?
提问于 2018-05-29 07:53:14
我能够创建一个粘滞的导航栏，并在有限成功的引导程序容器中使用它。
但是，向下滚动时，导航栏的宽度会突然增大到100％。
如果我删除引导程序容器，则不会发生此问题。
HTML：
<div class="container">
<div class="row">
<div class="col-sm">
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
</div>
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
回答 2
Stack Overflow用户
发布于 2018-05-29 16:05:42
CodePen
该.container应该不能作为所有内容的包装，但主要内容的内部使用。
HTML
删除.row＆.col-sm并在中添加一个.container包装器#navbar
<div class="container">
<div class="row">
<div class="col-sm">
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
...
至
<!-- <div class="row"> -->
<!-- <div class="col-sm"> -->
<div id="navbar">
<div class="container">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
<div class="container">
<div class="content">
<h3>Sticky Navigation Example</h3>
...
CSS
更改CSS以将背景添加到.container：
#navbar {
overflow: hidden;
background-color: #333;
}
至
#navbar .container {
overflow: hidden;
background-color: #333;
}
Stack Overflow用户
发布于 2018-05-29 17:05:08
你需要将导航栏放在具有.container类的容器中，然后使用Bootstrap Affix或其他解决方案将导航粘住。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008604
复制相关文章
相似问题