響應佈局與Bootstrap，.visible-phone無法正常工作

Question

嘗試隱藏兩個橫幅，當用戶使用手機，但使用類如隱形電話或可見桌面不工作。

我然後搜索，並認爲可能通過添加.less和less.js將解決問題，但失敗。

代碼在HTML：

<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css" /> 
<link type="text/css" rel="stylesheet" href="/css/site.css" /> 
<link type='text/css' href='/js/jquery.simplemodal.css' rel='stylesheet' media='screen' /> 
<link href="/css/bootstrap-responsive.css" rel="stylesheet"> 
<link rel="stylesheet/less" type="text/css" href="css/less/responsive.less"> 

<script type="text/javascript" src="/js/jquery.js" ></script> 
<script type="text/javascript" src="/js/bootstrap.min.js" ></script> 
<script type="text/javascript" src="/js/site.js" ></script> 
<script type='text/javascript' src='/js/jquery.simplemodal.js'></script> 
<script type='text/javascript' src='/js/less.min.js'></script> 

...我需要隱藏的橫幅視圖時在手機上：

<div class="hidden-phone"> 

    <div id="banner0" class="hidden-phone">    
     <div class="container-fluid"> 
      <div id="index_slider"> 
       <div class="banner-product"> 
        <div class="mask"> 
         <div class="banner-text"> 

          <h1>...</h1> 
          <br> 
          <h5>...</h5> 


           <div class="banner-button"> 
           <strong><a href="/download.html" class="btn btn-success btn-large" style="color:white">...</a> 
           </strong> 
           </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 



    <div id="banner1" class="hidden-phone">    
     <div class="container-fluid"> 
      <div id="index_slider"> 
       <div class="banner-product"> 
        <div class="uploadmask"> 
        <div class="banner-text"> 

         <h1>...<br> 
         </h1> 
         <br> 
         <h5>...</h5> 


          <div class="banner-button"> 
          <strong><a href="/submit.html" class="btn btn-primary btn-large" style="color:white">...</a> 
          </strong> 
          </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

...我只需要顯示視頻當它在桌面上時：

<div class="visible-desktop"> 

    <p align=center><a href="/demo.html">View Demo</a></p> 
        <br> 

      </div> 
      </div> 

有腳本的橫幅結合，這會是問題？

<script type="text/javascript"> 
function bindMouse(){ 
    var _o1=document.getElementById("online"); 
    var _o2=document.getElementById("banner1"); 
    var _o3=document.getElementById("desktop"); 
    var _o4=document.getElementById("banner0"); 
     _o1.onmousemove=function(){ 
     _o2.style.display="block"; 
     _o4.style.display="none"; 
     }; 
     _o3.onmousemove=function(){ 
     _o4.style.display="block"; 
     _o2.style.display="none"; 
     } 
} 
bindMouse(); 

$(document).ready(function(){ 
    loadImage("/images/Backbanner.jpg",function(img){$("#banner0").css("background","#b9c0d0 url(" + img.src + ") top center no-repeat");}); 
    loadImage("/images/banner-another.jpg",function(img){$("#banner1").css("background","#000000 url(" + img.src + ") top center no-repeat");}); 
}) 



function loadImage(url, callback) {  
    var img = new Image(); 
    img.src = url;  

$(img).load(function(){ 
    if (this.complete||this.readyState=="complete") { 
     callback(img);  
     return; 
    } 
    }) 
} 

</script> 

Answer 1

您是否嘗試將display屬性設置爲none，當他使用手機時？

在CSS中，你可以做

/* Phone */ 
@media only screen and (max-width: 760px) { 
    .hidden-phone{ 
    display: none; 
    } 
} 

只是適應你的類，它應該夠你問我想