컴퓨터 화면의 크기를 980p 미만으로 조정하면 고정 된 내비게이션이 정상적으로 작동합니다. 화면이 979px 이하가되면 navbar가 축소되어 완벽하게 작동합니다.부트 스트랩 navbar 축소 컴퓨터에서 iphone이 작동하지 않습니다.
그러나 코드를 Heroku에 푸시하고 내 iPhone 4S에서 사이트를로드하면 내 navbar가 축소되지 않을뿐만 아니라 약간 다른 것처럼 보입니다. 로고 아래에 float 오른쪽이 떨어지면 이상하게 보입니다 . 여기
@import "bootstrap";
@import "bootstrap-responsive";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 61px;
}
@media (max-width: 979px) and (min-width: 768px) {
body {
padding-top: 0;
}
}
@media (max-width: 768px) {
body {
padding-top: 0;
}
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
.container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
max-width: 1000px;
}
.span4 {
width: 323px;
margin-left: 20px;
text-align: center;
}
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: -20px;
padding-right: -20px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
font-size: 1.7em;
color: #555555;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 5px;
font-weight: bold;
line-height: 2;
}
#logo:hover {
text-decoration: none;
}
.navbar-inner {
min-height: 60px;
}
.navbar .nav {
margin: 0 -13px 0 0;
}
.navbar-fixed-top .navbar-inner {
box-shadow: none;
border-bottom: 1px solid #d4d4d4;
}
.navbar .btn-navbar {
margin-top: 16px;
}
li {
line-height: 40px;
list-style: none;
}
#smedia {
padding: 10px 9px 10px 0px;
font-size: 16px;
text-shadow: none;
}
.navbar .divider-vertical {
margin: 10px 9px;
border-left: 1px solid rgb(218,218,218);
}
그리고 내 헤더 HTML입니다 : 내가 말할 것
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Professional Workroom of Design", root_path, id: "logo" %>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-linkedin icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-google-plus icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-twitter icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-facebook icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li class="divider-vertical"></li>
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Portfolio", portfolio_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
</ul>
</div>
</div>
</div>
</header>
정보를 보내 주셔서 감사합니다. – wkernan