как прикрепить коробку navbar

Question

Im используя аффикс, чтобы фиксировать мой навигатор при прокрутке.

Но когда прокрутка navbar не работает нормально.

Я использую <header class="container">, чтобы дать в коробке взгляд на веб-сайт заголовка, содержимое центра.

Если бы я использовал заголовок без контейнера, заголовок и меню соответствовали бы экрану сбоку. В этом случае прикрепленный navbar будет работать нормально, подходящий экран таким же образом (с шириной 1391 пикселей).

Однако я использую <header class="container">. И прикрепленный navbar заканчивается на экране, потому что он тоже принимает ширину 1391 пикселей. Как если бы это был боковой сайт, смотрящий сайт. Он не адаптируется к ширине контейнера.

Вы знаете, как его решить?

или

это что самозагрузки аффикс рисунки только для растянутых сайтов и не коробочных сайтов?

Это мой 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-fixed-top справа и слева. Использование 0 устанавливает его из стороны в сторону.

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

После этого, чтобы сделать их все выверять, вам придется перезаписать поля Bootstrap (для например .navbar-справа от вас есть что, и т.д.).

Смотрите скрипку: https://jsfiddle.net/jennift/o7utddud/2/

Answer 2

На большом экране, вы хотите # nav.affix следовать размер контейнера. Используя 0 слева и справа, контейнер использует в качестве направляющей, «растягивая» его только ширину, чем контейнер.

На меньшем экране контейнер теперь имеет ширину «авто» и с фиксированным положением он будет растягиваться влево-вправо. Используя отступы 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; 
    } 
} 

Fiddle: http://jsfiddle.net/jennift/hnkutxsn/3/