Я создаю проект с Bootstrap и im, столкнувшись с небольшой проблемой. У меня есть контейнер под Navtop.My проблема в том, что часть моего контейнера скрыта под верхним заголовком. Я не хочу использовать верх -аргина с контейнером. 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>
Это обрабатывается добавлением некоторого padding
в начало <body>
.
По Документация по загрузке на .navbar-fixed-top
, попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет. По умолчанию значение navbar
равно 50px
.
body {
padding-top: 70px;
}
Кроме того, посмотрите на источник этот пример и откройте starter-template.css
.
Я предполагаю, что проблема, с которой вы связаны, связана с динамической высотой, которую имеет фиксированная навигационная панель наверху. Например, когда пользователь входит в систему, вам нужно отобразить какой-то "Hello [User Name]", а когда имя слишком велико, навигационная панель должна использовать большую высоту, чтобы этот текст не был "t накладывается на навигационное меню. Поскольку navbar имеет стиль" position: fixed ", тело остается под ним, а более высокая его часть становится скрытой, поэтому вам нужно" динамически" изменять заполнение вверху каждый раз, когда 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
. (или поиграть с разными значениями)
Базовый бутстрап навигатор занимает высоту около 40px
. Поэтому, если вы даете padding-top
или margin-top
50px
или более, вы всегда будете иметь это пространство для перерыва между вашим контейнером и навигационной панелью.
Я знаю, что эта ветка устарела, но я просто попал в эту проблему, и я ее исправил, просто используя класс 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>
У меня тоже была эта проблема, но она была решена без script и только с использованием CSS. Сначала я начинаю с рекомендуемого дополнения для фиксированного меню, устанавливая 60 пикселей, описанные на веб-сайте 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.
Надеюсь, что это поможет...
Я решил это с помощью jquery
<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>