bootstrap, прикрепленный к верхней части, но ниже alert at top

Я пытаюсь получить предупреждение в верхней части моей страницы с формой для моих посетителей, чтобы ввести их номер телефона. Это просто «alert alert-info» div с формой внутри него. Так что это отлично работает, потому что я положил его на верхнюю часть тега моего тела. Затем наступает навигатор, который сейчас является «навигационным навигационным навигационным навигатором по умолчанию». Когда я пытаюсь изменить это на фиксированную вершину (фиксированную под предупреждением), она просто появляется поверх предупреждения (может быть проблема с z-индексом, я не знаю). Кто-нибудь знает, как я могу сделать навигацию фиксированной вверху, но ниже предупреждения (которое должно быть статичным на самом верху)?bootstrap, прикрепленный к верхней части, но ниже alert at top

Спасибо за много!

источник

2015-05-12 jacob1992

documentation: «Фиксированный навигатор накладывает другое содержимое, если вы не добавили отступы в верхнюю часть тела».

источник

2015-05-12 02:30:15 DavidBrown

DavidBrown, спасибо за ваш ответ. Возможно, мне что-то не хватает, но я хорошо знаю об этом, но не могу понять, как это могло бы помочь в этом случае, так как мой макет должен выглядеть так: Alert-Fixed Nav-Jumbotron. Это помогает в случае, когда Nav на первом месте, затем в режиме предупреждения и jumbotron. Фиксированный nav должен находиться между предупреждением и jumbotron. – jacob1992

Можете ли вы поделиться URL-адресом, чтобы мы могли увидеть проблему? – DavidBrown

-1

Если я получу то, что вы хотите сделать, почему бы не попробовать что-то вроде этого. Просто добавьте еще один контейнер div в .. но на наверху навигатора. И просто поставьте предупреждение в этом контейнере. Вот Fiddle.

<nav class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container col-lg-12 bg-primary"><br><br></div> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav>

источник

2015-05-12 02:50:14 AngularJR

Спасибо за ваши ответы. Нашел окончательный ответ сам (от другого вопроса здесь), используя ассемблер бутстрапа. Я положил идентификатор на предупреждение под названием «alert» и идентификатор на nav, называемый «topnavbar». Затем я добавил CSS:

#topnavbar { 
margin: 0; 
} 
#topnavbar.affix { 
position: fixed; 
top: 0; 
width: 100%; 
}

и JavaScript:

$('#topnavbar').affix({ 
offset: { 
top: $('#banner').height() 
} 
});

От: Putting content/banner above the "Fixed Top Navbar"

Это поставило СЧ между чекой и JumboTron и нав становится липким после предупреждения.

источник

2015-05-12 03:25:15 jacob1992

bootstrap, прикрепленный к верхней части, но ниже alert at top

ответ

Смежные вопросы