Bootstrap css скрывает часть контейнера ниже navbar navbar-fixed-top
Я создаю проект с Bootstrap и im сталкивается с небольшой проблемой .У меня есть контейнер под навигатором.Моя проблема заключается в том, что некоторая часть моего контейнера скрыта под заголовком nav-top.Я не хочу использовать top-margin с контейнером. Pls см. ниже html, в котором im сталкивается с проблемой
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>
</head>
<body>
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
</li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="icon-eye-open">
</i>Assembly Elections
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
</ul>
</li><li class="divider-vertical">
</li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
</div>
</div>
</div>
<div class="container" >
<ul class="nav nav-pills">
<li class="active">
<a href="#">Popular</a>
</li>
<li><a href="#">Trending</a></li>
<li><a href="#">Latest</a></li>
</ul>
</div>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap-dropdown.js"></script>
<script src="~/Scripts/Collapse.js"></script>
</body>
</html>
7 ответов
это обрабатывается путем добавления некоторых padding наверх <body>.
по состоянию на документация Bootstrap на .navbar-fixed-top, попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет: по умолчанию navbar is 50px высокий.
body {
padding-top: 70px;
}
кроме того, взгляните на исходный код и открытым starter-template.css.
Я думаю, что проблема у вас связана с динамической высотой, что фиксированный navbar в верхней части есть. Например, когда пользователь входит в систему, вам нужно показать какой-то "Привет [Имя Пользователя]" и когда имя слишком широк,navbar необходимо использовать больше высоты, чтобы этот текст не перекрывался с navbar. Как navbar стиль "установки: фиксированный", тело остается под ним и более высокая часть становится скрытой, поэтому вам нужно "динамически" менять обивку вверху каждый раз, когда navbar изменение высоты, которое произойдет в следующих сценариях:
- страница загружается / перезагружается.
- окно браузера изменяется, так как это может ударить по-разному реагировать останова.
- на navbar содержание изменяется прямо или косвенно, так как это может спровоцировать высота изменение.
эта динамичность не покрывается регулярным в CSS поэтому я могу придумать только один способ решить эту проблему, если у пользователя есть JavaScript включено. Пожалуйста, попробуйте следующее jQuery фрагмент кода для разрешения сценариев 1 и 2; для сценария 3 Не забудьте вызвать функцию onresize в() после любого изменения в navbar содержание:
var onResize = function() {
// apply dynamic padding at the top of the body according to the fixed navbar height
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
// attach the function to the window resize event
$(window).resize(onResize);
// call it also when the page is ready after load or reload
$(function() {
onResize();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>просто определите пустую панель навигации до фиксированной, она создаст необходимое пространство.
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
это происходит потому, что с navbar-fixed-top класс navbar получает position:fixed. Это, в свою очередь, выводит панель навигации из потока документов, оставляя тело, чтобы занять место за панели навигации.
вам нужно применить padding-top или margin-top на container, исходя из ваших требований со значениями >= 50px. (или играть с различными значениями)
основной загрузочный navbar берет высоту вокруг 40px. Так что если вы дайте padding-top или margin-top of 50px или больше, у вас всегда будет передышка между вашими контейнер и навигации.
у меня тоже была эта проблема, но я решил ее без скрипта и только с помощью CSS. Я начинаю, следуя рекомендуемому заполнению для фиксированного меню, установив 60px, описанный на веб-сайте Bootstrap. Затем я добавил три медиа-тега, которые изменяют размер заполнения в точках среза, где мое меню также изменяется.
<style>
body{
padding-top:60px;
}
/* fix padding under menu after resize */
@media screen and (max-width: 767px) {
body { padding-top: 60px; }
}
@media screen and (min-width:768px) and (max-width: 991px) {
body { padding-top: 110px; }
}
@media screen and (min-width: 992px) {
body { padding-top: 60px; }
}
</style>
одно примечание, когда моя ширина меню находится между 768 и 991, логотип меню в моем макете плюс <li> параметры вызывают перенос меню на две строки. Поэтому Я пришлось настроить заполнение сверху, чтобы меню не покрывало содержимое, следовательно, 110px.
надеюсь, что это помогает...
Я знаю, что эта тема старая, но я только что попал в эту проблему, и я исправил ее, просто используя page-header класс на моей странице, под нав. Также я использовал <nav> тег вместо <div> но я не уверен, что это приведет к какому-либо другое поведение.
С помощью page-header в качестве контейнера для страницы, вам не придется возиться с <body>, только если вы не согласны с пространством по умолчанию, что page-header дает вам.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<div class="navbar-right">
</div>
</div>
</nav>
</div>
<div class="page-header">
<div class="clearfix">
<div class="col-md-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<form role="form">
<div class="col-lg-6">
<div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
<div class="form-group">
<label for="InputName">Enter Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Enter Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Confirm Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>
</div>Я решил его с помощью jquery
<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>