загрузочный контент наложения на маленьком экране

Question

Привет, я использую бутстрап с двумя различными навигаторами, один для больших экранов и один для экранов размером с телефон.

Адрес: http://www.gamingonlinux.com/

Код для обоих NavBars:

<!-- navbar --> 
<div class="hidden-xs"> 
    <div class="container"> 
     <div class="navbar navbar-fixed-top {:inverse}" role="navigation"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <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"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/" style="padding-top: 0px; padding-bottom: 0px;"><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></a></li> 
        <li><a href="/">Home</a></li> 
        <li><a href="/donate/">Donate</a></li> 
        <li><a href="/sales/">Sales</a></li> 
        <li><a href="/contact-us/">Submit Tip</a></li> 
        <li><a href="/crowdfunding/">Wiki</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forum <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="/forum/">Forum</a></li> 
          <li><a href="/community/">Community Page</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu"> 
          {:user_menu} 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><form method="get" action="/index.php?module=search" class="navbar-form" role="search"> 
        <input type="hidden" name="module" value="search"> 
        <input type="text" class="form-control" name="q" placeholder="Search Articles"> 
        <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/> 
       </form></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- navbar phone screens --> 
<div class="visible-xs"> 
    <div class="container"> 
     <div class="navbar navbar-fixed-top {:inverse}" role="navigation"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
      <ul class="nav navbar-nav"> 
       <li><a href="/">Home</a></li> 
      </ul> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><form method="get" action="/index.php?module=search" class="navbar-form" role="search"> 
         <input type="hidden" name="module" value="search"> 
         <input type="text" class="form-control" name="q" placeholder="Search Articles"> 
         <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/> 
         </form> 
         </li> 
        </ul> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a> 
        <ul class="dropdown-menu" role="menu"> 
         {:user_menu} 
        </ul> 
       </li> 
      </ul> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <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="/"><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></a> 
       </div> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/donate/">Donate</a></li> 
        <li><a href="/sales/">Sales</a></li> 
        <li><a href="/contact-us/">Submit Tip</a></li> 
        <li><a href="/crowdfunding/">Wiki</a></li> 
        <li><a href="/forum/">Forum</a></li> 
        <li><a href="/community/">Community Page</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="contentwrap"> 
    <div class="container"> 
     <div class="add-bottom-margin"> 
      <!-- image carousel --> 
      <div class="carousel slide" data-ride="carousel"> 
       <!-- Wrapper for slides --> 
       <div class="carousel-inner"> 
        {:carousel_list} 
       </div> 
       <!-- Controls --> 
       <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
       </a> 
       <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
       </a> 
      </div><!-- /.carousel --> 
     </div> 

Затем этот JS-код используется для расчета правильного положения для «contentwrap», чтобы убедиться, что он сидит непосредственно после навигационной панели, и работает на нашей нормальной навигационной панели, но не на маленьком экране навигационной панели странно:

jQuery(document).ready(function() { 
      $('.contentwrap').css({ 
       'margin-top': (($('.navbar-fixed-top').height()) + 1) + 'px' 
      }); 
      $(window).resize(function() { 
       $('.contentwrap').css({ 
        'margin-top': (($('.navbar-fixed-top').height()) + 1) + 'px' 
       }); 
      }); 
}); 

я упускаю что-то очевидное, почему он не работает на видимом х s navbar?

Для справки JS-код пришел из этого сообщения twitter bootstrap navbar fixed top overlapping site, и несколько человек его используют.

Answer 1

$('.navbar-fixed-top').height() 

У вас есть 2 элемента с этим классом. Приведенный выше код вычисляет высоту первого элемента, который равен нулю в этом случае экран

Вычислить сводку высот элементов

var calcHeights = function (elements) { 
      var r = 0; 
      elements.each(function() { 
       r += $(this).height(); 
      }); 
      return r; 
     } 

вместо $('.navbar-fixed-top').height() использования calcHeights($('.navbar-fixed-top'))

Answer 2

Предложения, которые не требуют любой Jquery клей:

• Изменение navbar-fixed-top для navbar-top и не размещайте навигаторы в контейнере.

• Затем содержимое должно начинаться после navbar. (Регулировка Navbar и содержание поля соответственно)

Answer 3

мне удалось фик его благодаря комментарий от «ТМГ»

Я дал каждому NavBar идентификатор, а затем просто добавили их вместе, это очень просто и отлично работает.

$('.contentwrap') .css({'margin-top': (($('#nav-small').height() + $('#nav-normal').height()) + 1)+'px'}); 
$(window).resize(function() 
{ 
     $('.contentwrap') .css({'margin-top': (($('#nav-small').height() + $('#nav-normal').height()) + 1)+'px'}); 
});