0
스 니펫이 작동하지 않지만 내 질문에 대한 이유는 무엇입니까? 브라우저 크기 조정시 navbar가 다음과 같이 보이지 않습니다. 휴대 전화에서 볼 때 미디어 쿼리를 사용하는 이유가 확실하지 않아 첨부 된 사진이 있습니다. 아이폰에 네비게이션 바코드가 같더라도 데스크톱에서 내 navbar가 휴대폰과 같은 방식으로 표시되지 않습니다.
의
데스크톱 버전 6
.navbar-default .navbar-nav > li > a:hover {
text-decoration: none;
color: #0064a4;
}
.navbar {
border-radius: 0;
padding: 10px 0;
margin: 0px;
}
.navbar-brand {
height: 70px;
padding: 0 0 0 20px;
}
.navbar-collapse {
padding-left: 20px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
#navbar5 {
font-family: 'Oswald', sans-serif;
margin: 0;
float: right;
background-color: #00a7d7;
}
.navbar-default {
background-color: #00a7d7;
border: none;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #0064a4;
background-color: transparent;
}
.navbar-toggle {
/* padding:13px 10px; */
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #0096C1;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #00a7d7;
color: #0064a4;
}
ul.dropdown-menu {
background-color: #00a7d7;
border: none;
box-shadow: none;
}
ul.dropdown-menu a {
color: #fff;
}
@media (min-width: 992px) {
.anon>.col-md-offset-0 {
margin: 0 12%;
}
.navbar-brand img {
width: 75px;
}
}
@media (max-width: 991px) {
.navbar-brand img {
width: 120px;
}
body {
padding-top: 89px;
}
.navbar-header {
float: none;
height: 120px;
}
.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 {
font-size: 50px;
line-height: 50px;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
.navbar-default .navbar-toggle .icon-bar {
width: 40px;
height: 4px;
margin: 8px 0;
}
.navbar-toggle {
padding: 20px;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example5">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5">
<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="index.html">
<img src="img/logo.png" alt="cophyright logo">
</a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">ABOUT</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="copyright.html">
\t \t COPYRIGHT
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="copyright.html#cpy">WHAT IS COPYRIGHT?</a>
</li>
<li><a href="copyright.html#cvcp">WORKS INCLUDED</a>
</li>
<li><a href="copyright.html#notcp">WORKS EXCLUDED</a>
</li>
<li><a href="copyright.html#rights">COPYRIGHTS</a>
</li>
<li><a href="copyright.html#limit1">LIMITATIONS</a>
</li>
<li><a href="copyright.html#own">OWNERSHIP</a>
</li>
<li><a href="copyright.html#term">TERM OF PROTECTION</a>
</li>
</ul>
</li>
<li><a href="protection.html">PROTECTION</a>
</li>
<li><a href="contact.php">CONTACT US</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
죄송합니다. –