时间戳

首页 > 解决方案 > 使用引导容器时，粘性导航栏增加到 100%

html - 使用引导容器时，粘性导航栏增加到 100%

问题描述

我能够创建一个粘性导航栏并在引导容器中使用它，但成功有限。

但是，当您向下滚动时，导航栏的宽度会突然增加到 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>

*对不起，如果它真的很简单！HTML 新手 :)

标签： htmlcsstwitter-bootstrapnavbarsticky

解决方案

代码笔

该类.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;
}

推荐阅读