Question

原始邮寄

我在使用固定的导航栏时遇到了麻烦。当我滚动时，我的导航栏增加了它的宽度，它超过了容器和主体宽度。实际上它用完了屏幕

这是我的HTML

<header>
  <div class="container">

    <div class="encabezado row">
      <img class="img-responsive encabezado-pict" src="img/header.jpg">
    </div>

    <!-- ===================================== -->
    <!-- ============ NAV BAR ================ -->
    <!-- ===================================== -->
      <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>
                            <li><a href="#">Origen Bicéfalo</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown" class="dropdown" class="dropdown" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Normatividad <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Ley de profesiones</a>
                            </li>
                            <li><a href="#">Reglamento a la Ley de profesiones</a>
                            </li>
                            <li><a href="#">Estatutos</a>
                            </li>
                            <li><a href="#">Código de Ética</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Servicios <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Afiliación</a>
                            </li>
                            <li><a href="#">Bolsa de empleo</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown" class="dropdown" class="dropdown" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Académicos <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Certificación</a>
                            </li>
                            <li><a href="#">Café Técnico</a>
                            </li>
                            <li><a href="#">Congresos</a>
                            </li>
                            <li><a href="#">Convenios</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Estudiantiles <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Servicio Social y Prácticas</a>
                            </li>
                            <li><a href="#">Conlami Universitario</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
      </nav>   
  </div>
</header>

这是我的CSS

    .affix {

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

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

我尝试给出一个静态宽度，但没有响应。

我非常感谢。

EDITED

我发现问题是这个

<div class="container">

之后

<header>

我使用该容器为我的网页标题提供了一个盒装外观，否则它会看起来很拉伸。

我注意到当我移除taht容器时，我的带固定的固定导航栏完全适合屏幕（1391px）。

但是当容器在那里时，固定导航栏的宽度完全相同（1391px），因此导航栏用完了屏幕。

你知道如何解决这个问题吗？

Answer 1

只需将container-fluid更改为container我希望没问题。

Bootstrap贴有导航栏---宽度超过容器和正文编辑

1 个答案: