4
Проблема с бутстрапом рухнула navbar. Навигационная панель у подножия страницы сильно падает, но при попытке открыть в сложенном состоянии с помощью кнопки кратковременной навигации навигационная панель открывается только на секунду, а затем сразу же закрывается. Мне нужно дважды щелкнуть, чтобы он снова открывался (а затем, по-видимому, закрывался), поэтому я подозреваю, что он действительно открыт, но не доступен для просмотра (т. Е. Он технически закрывается при втором нажатии). bootstrap рухнул navbar багги открыт
a {text-decoration:none; font-family: EB Garamond;-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
.navbar-header {
padding-right:20px;
}
.navbar-header > a > i{
color: #777;
padding-top: 10px;
padding-left:10px;
padding-right:10px;
}
.navbar-header > a > i:hover{
color: white;
text-decoration:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}
.navbar-footer > li {
padding-left:5px;
padding-right:5px;
}
body {
background: url(./img/home-background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 50px;
}
.jumbotron {
background-color: rgba(255,255,255, 0.5);
color: inherit;
}
#banner-txt {
position-left: -50px;
}
#banner-txt > h1 {
font-size: 500%;
font-family: EB Garamond;
color: #96281B;
}
@media (max-width: 1100px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
#brand{
margin-top: -10px;
width: 40px;
height: 40px;
background: url(./img/brand-999.png);
background-size: 40px auto;
}
#brand:hover{
background: url(./img/brand-fff.png);
background-size: 40px auto;
-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href= "css/bootstrap.min.css" rel="stylesheet">
<link href = "index.css" rel = "stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="./index.html">
<div id="brand">
</div>
</a>
</div>
<div class="navbar-header pull-right">
<a href=""><i class="fa fa-twitter fa-2x"></i></a>
<a href=""><i class="fa fa-facebook fa-2x"></i></a>
<a href=""></i></a>
</div>
</div>
<br><br><br><br>
<div class="container">
<div class="pull-left" id="banner-txt">
<h1>SPORTS TEAM HOMEPAGE</h1>
<p>
</p>
</div>
</div>
<div class = "container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class= "navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navFooterCollapse">
<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 navFooterCollapse">
<ul class="nav navbar-nav navbar-footer">
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">ROSTER</a></li>
<li><a href="#">STRENGTH AND CONDITIONING</a></li>
<li><a href="#">RESULTS</a></li>
<li><a href="#">PROGRAM</a></li>
<li><a href="#">MERCH</a></li>
<li><a href="#">COMMUNITY</a></li>
</ul>
</div>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Не могли бы вы сделать свой пост в [полный работоспособный живой пример] (http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets /)? – cvrebert
Готово. Извините за это, новичок в Stack Overflow. Чувствуешь другой взгляд? –
Проблема вызвана вашим пользовательским CSS. Если я удалю его, значит, сбой в navbar (un) прекрасен. Итак, начните удалять части, пока не найдете виновника. – cvrebert