如何粘贴盒装导航栏答案

【问题标题】：how to affix a boxed navbar如何粘贴盒装导航栏
【发布时间】：2016-08-31 00:10:38
【问题描述】：

我在滚动时使用词缀来修复我的导航栏。

但是当滚动导航栏不能正常工作时。

我使用<header class="container"> 为标题网站提供盒装外观，即中心内容。

如果我在没有容器的情况下使用标题，标题和菜单将并排放置。在这种情况下，附加的导航栏可以正常工作，以相同的方式适应屏幕（宽度为 1391 像素）。

但是我使用<header class="container">。并且附加的导航栏因为占用 1391px 的宽度而耗尽了屏幕。就像它是一个并排的网站一样。它不适应容器宽度。

你知道怎么解决吗？

或

bootstrap 词缀是否仅适用于拉伸站点而不是盒装站点？

这是我的导航 HTML

<header class="container">
    <nav id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="222">
          <div class="container-fluid">
          <div class="navbar-header"><a class="navbar-brand" href="#">Home</a>
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
              </button>
          </div>
          <div class="collapse navbar-collapse navbar-menubuilder">
              <ul class="nav navbar-nav navbar-left">
                  <li class="dropdown" class="dropdown"><a href="3" class="dropdown-toggle" data-toggle="dropdown">Nosotros <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Misión, Visión y Objetivos</a>
                          </li>                      
                      </ul>
                  </li>                      
              </ul>
          </div>
      </div>
    </nav>
</header>

这是css

    header{
        border-top-width: 8px;
        border-top-style: solid;
        border-top-color: #888;
    }
   .affix {

            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1;
            right: 10%;
            left: 10%;
          }

    .affix + .container-fluid {
            padding-top: 70px;


    }

看看here，它与我发生的事情相似。让结果屏幕越来越小，看看会发生什么

【问题讨论】：

请将您的工作文件上传到 jsfiddle
对不起，我试过了，但是词缀在那里不起作用，但是这里（jsfiddle.net/skelly/df8tb）有一个例子，看看。让结果屏幕越来越大，看看会发生什么

标签： html twitter-bootstrap css navbar

【解决方案1】：

没有代码，我只能假设您的代码是什么样子。

使用 twitter bootstrap 的 navbar fixed navbar 示例，您需要更改 .navbar-fixed-top right 和 left 值。使用 0 将其设置为左右。

@media (min-width: 768px) {
    .navbar-fixed-top {
        position: fixed;
        right: auto;
        left: auto;
    }
}

之后，为了使它们全部对齐，您必须覆盖引导程序的边距（例如 .navbar-right of you have that etc）。

见小提琴：https://jsfiddle.net/jennift/o7utddud/2/

【讨论】：

我没有使用 navbar-fixed-top 类。请看一下我的代码。
你用词缀类尝试过我的其他答案吗？

【解决方案2】：

在更大的屏幕上，您希望#nav.affix 跟随容器大小。在左右使用 0 时，使用容器作为参考线，“拉伸”它仅与容器一样宽。

在较小的屏幕上，容器现在具有“自动”的宽度，并且具有固定的位置，它将从左向右伸展。使用 20px 的填充（由引导 css 使用），您可以将其重新对齐到标题容器的长度。

#nav.affix {
    position: fixed;
    top: 0;
    left:0;
    right:0;
}

@media (max-width: 767px)  { /*controls on smaller screen*/
    #nav.affix {
        left:20px; /*20px to follow bootstrap body padding */
        right:20px;
    }
}

小提琴：http://jsfiddle.net/jennift/hnkutxsn/3/

【讨论】：