Question

我在滚动时使用词缀固定我的导航栏。

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

我使用<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它与我发生的情况类似。使结果屏幕越来越小，看看会发生什么

Answer 1

没有代码，我只能假设代码的样子。

使用twitter bootstrap的navbar固定导航栏示例，您需要更改.navbar-fixed-top右侧和左侧值。使用0将它从一侧到另一侧设置。

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

在那之后，为了使它们全部对齐，你将不得不覆盖bootstrap的边距（例如.navbar-right of you have that that，等等。）

请参阅小提琴：https://jsfiddle.net/jennift/o7utddud/2/

Answer 2

在更大的屏幕上，您希望＃nav.affix遵循容器大小。左右使用0，使用容器作为指导，＆＃34;拉伸＆＃34;它只与容器一样宽。

在较小的屏幕上，容器现在的宽度为＆＃34; auto＆＃34;并且在固定位置它将从左向右伸展。使用20px的填充（由bootstrap 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/

如何粘贴一个盒装导航栏

2 个答案: