移動設備頁面導航欄覆蓋幻燈片放映Boostrap 3

我還沒有編碼一個網頁在多年，我正在慢慢回到它。試圖更新我的工作頁面，因爲它看起來過時了。我使用Bootstrap 3和模板「Ruma」。我用我想要的內容替換了大部分內容（仍然需要調整一些顏色）。移動設備頁面導航欄覆蓋幻燈片放映Boostrap 3

當我在移動設備或Responsinator上查看網站時，導航欄將覆蓋幻燈片放映。我需要做些什麼才能將內容向下推，以便導航欄不會疊加在移動設備上的幻燈片放映之上？

也有可能使用JavaScript來將徽標更改爲更小尺寸的移動設備？我玩過一些東西，但在我的嘗試中沒有成功。

代碼導航欄是：

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <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/new_testsm.png" alt="BB" /></a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="index.html">HOME</a></li> 
       <li><a href="products.html">PRODUCTS</a></li> 
       <li><a href="buy.html">BUY </a></li> 
       <li><a href="about.html">ABOUT</a></li> 
        <li><a href="contact.html">CONTACT</a></li> 
      </ul> 
     </div> 

    </div> 
</div>

然後開始播放幻燈片

<section id="home" class="text-center"> 

      <div id="carousel-example" class="carousel slide" data-ride="carousel"> 

       <div class="carousel-inner"> 
        <div class="item active"> 

         <img src="img/bullets1.png" alt="" /> 
         <div class="carousel-caption" > 
          <h4 class="back-light">text.</h4> 
         </div> 
        </div> 
        <div class="item"> 
         <img src="img/ammobig.png" alt="" /> 
         <div class="carousel-caption "> 
          <h4 class="back-light">text.</h4> 
         </div> 
        </div> 
        <div class="item"> 
         <img src="img/boxes1.png" alt="" /> 
         <div class="carousel-caption "> 
          <h4 class="back-light">text.</h4> 
         </div> 
        </div> 
       </div> 

       <ol class="carousel-indicators"> 
        <li data-target="#carousel-example" data-slide-to="0" class="active"></li> 
        <li data-target="#carousel-example" data-slide-to="1"></li> 
        <li data-target="#carousel-example" data-slide-to="2"></li> 
       </ol> 
      </div> 

    </section>

徽標掉我曾嘗試：

$(window).scroll(function() { 
      if ($(".navbar").offset().top >50) { 
       $(".navbar-fixed-top").removeClass("small-logo"); 
       $(".navbar-fixed-top").addClass("navbar-pad-original"); 
       $(".navbar-fixed-top").addClass("navbar-brand"); 
       $(".navbar-fixed-top").attr('src', 'img/new_testsm.png'); 

      } else { 
       $(".navbar-fixed-top").removeClass("navbar-pad-original"); 
       $(".navbar-fixed-top").removeClass("navbar-brand"); 
       $(".navbar-fixed-top").addClass("small-logo"); 
       $(".navbar-fixed-top").attr('src', 'img/new_testsm2.png'); 
      } 
     });

任何幫助你們可以提供將不勝感激。我正在慢慢地找出自己的一些東西，但有些似乎逃避了我。

來源

2014-07-21 Supermoose

你能提供一個jsfiddle嗎？ – Andrew

你能告訴我什麼是jsfiddle嗎？我搜索了它，但不確定你想要我做什麼。但我會爲你提供任何你需要我的東西。 – Supermoose

使用http://www.bootply.com/（jsfiddle的引導版）創建一個您所看到的示例，爲您提供解決方案會更容易。 – Andrew

您不需要使用JS交換圖像，只需使用引導程序在特定視圖中顯示即可。

導航欄圖標：

<a class="navbar-brand hidden-xs" href="index.html"><img src="img/new_testsm.png" alt="BB" /></a> 
<a class="navbar-brand visible-xs-*" href="index.html"><img src="img/new_testsm2.png" alt="BB" /></a>

爲幻燈片的問題上，QuickFix可以通過CSS固定。

以下內容添加到您的自定義CSS

@media (max-width: 767px) { 
    #carousel-example{ 
    margin-top: 45px; 
    } 
}

的@media標籤查找設備的最大寬度當前視口，作爲一個如果聲明CSS。

Bootstrap將767px識別爲「移動設備」。下面是顯示每個設備Bootstraps信息的圖表。請根據需要調整 Bootstrap Responsive Chart

來源

2014-07-22 19:03:04 Andrew

移動設備頁面導航欄覆蓋幻燈片放映Boostrap 3

回答

相關問題