bootstrap navbar çöküş bilgisayarda çalışmıyor bilgisayarda çalışmıyor

Question

Bilgisayarımın ekranını 980 pikselin altına getirdiğimde sabit navbar iyi çalışıyor. Ekranım 979 piksel veya daha az olduğunda, navbar daraltma devreye giriyor ve mükemmel çalışıyor.

Ancak, kodumu Heroku'ya kadar yüklediğimde ve sitemi iPhone 4S'ime yüklediğimde, yalnızca navcamım çökmez, aynı zamanda biraz farklı görünür - kayan nokta sağa sola düşer ve garip görünmesine neden olur. . Burada

@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); 
} 

Ve başlık HTML: Ben söz ediyorum

<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> 

Answer 1

İki şey

İşte benim custom.css.scss dosyasıdır. Eğer html belgesi

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" /> 

başkanı ayarlanan correcdt görünüme sahip olması Ve ikincisi sana medya sorguları biraz dağınık olduğunu fark edin. Bunların birlikte ve belgenin sonundaki tutulması en iyisidir. CSS'nin sonunda değilse, diğer CSS medya sorgusuna rağmen üzerine yazacaktır.