CSS樣式不隱藏正確的圖像手機

我建立一個網站試圖找出如何this page可以做這樣的事情： CSS樣式不隱藏正確的圖像手機

我看了看他們的頁面的CSS和HTML知道如何罐可以建立這樣的東西。

嗯...這是我的結果：

問題是，當我嘗試在手機上顯示的網站，我無法隱藏自己的形象，也如果我做「隱藏xs「在我的圖像的div文本不居中。

上，您可以SE我想要做什麼的左側和右側我的結果：

HTML

<div class="white_bg"> 
    <div id="mobile-app-sections" class="container"> 
     <div class="container-medium"> 
      <div class="row"> 
       <div class="col-xs-5 into-row border app-image-wrap"> 
        <img class="app-phone" src="img/device.jpg"> 
       </div> <!--col--> 
       <div class="col-xs-7 into-row border"> 
        <h2>foodpress in your mobile! </h2> 
        <h3 class="green-text">Get our app, it's the fastest way to order food on the go.</h3> 

        <div class="row border" id="getapp-wrap"> 
         <div class="col-xs-4 border"> 
          <a href="http://" target="_blank"> 
           <img class="get-app" src="img/get-app-store.png"> 
          </a> 
         </div> 
         <div class="col-xs-4 border"> 
          <a href="http://" target="_blank"> 
           <img class="get-app" src="img/get-google-play.png"> 
          </a> 
         </div> 
        </div> <!--row--> 
       </div> <!--col--> 
      </div> <!--row--> 
     </div> <!--container-medium--> 

     <div class="mytable border" id="getapp-wrap2"> 
      <div class="mycol border"> 
       <a href="http://" target="_blank"> 
        <img class="get-app" src="img/get-app-store.png"> 
       </a> 
      </div> <!--col--> 
      <div class="mycol border"> 
       <a href="http://" target="_blank"> 
        <img class="get-app" src="img/get-google-play.png"> 
       </a> 
      </div> <!--col--> 
     </div> <!--mytable--> 
    </div> <!--container--> 
</div><!-- End white_bg -->

CSS

/* CUSTOM CSS */ 

img{ 
    max-width:100%; 
    height:auto; 
} 

.border{ 
    border:0px solid red; 
} 


.mytable{ 
    display:table; 
    width:100%; 
} 

.mytable .mycol{ 
    display:table-cell; 
} 

#mobile-app-sections{ 
    padding-top:30px; 
} 

.container-medium { 
    max-width:800px; 
    margin:auto; 
} 

#mobile-app-sections h2{ 
    margin-top:22%; 
} 

#mobile-app-sections h3{ 
    margin:auto auto 25px; 
} 

#getapp-wrap2{ 
    margin:auto; 
    width:300px; 
} 

#getapp-wrap2 img{ 
    max-width:130px; 
} 

#getapp-wrap2 .mycol{ 
    width:150px; 
} 

#getapp-wrap2{ 
    display:none; 
}

HTML和CSS我從this site tr我想知道我該如何解決我的問題。

我在做什麼錯？

此外，我想隱藏的圖像有這個類：class =「app-phone」，我無法在頁面中找到（可能是這裏的問題？）。

感謝您的幫助！

來源

2017-01-26 Faustino Gagneten

我相信你需要爲感興趣的移動解決方案添加媒體查詢，並在其中定義您的手機圖像css，部分顯示爲：無。 –

當您隱藏圖像時文本不居中，因爲它仍然限制在12列總數中的7列。您需要使用移動設備上的全部12列，然後在下一個標準斷點大小（小）時限制爲7列。

<div class="hidden-xs col-sm-5 into-row border app-image-wrap"> 
    <img class="app-phone" src="img/device.jpg"> 
</div> <!--col--> 

<div class="col-xs-12 col-sm-7 into-row border">

進一步閱讀：http://getbootstrap.com/css/#grid

來源

2017-01-26 05:11:19

不僅僅是文本的中心，也是ios和android按鈕下方的邊距。但該網站不使用此解決方案 –

這是一個很好的觀點。謝謝 –

在'＃getapp-wrap2'或其中包含的圖像上使用margin底部。然後應用媒體查詢，在較大尺寸的情況下移除，如果您發現它會推出垂直定位 –

XS用於屏幕尺寸小於576px，SM是上述576px。所以你應該改變你的xs到sm。所以，當你寫一個col-xs-6它告訴瀏覽器，使該列50％的寬度576px下（移動），如果你希望它是爲平板電腦和臺式機的50％，併爲移動100％，你應該使用col-sm-6

來源

2017-01-26 05:22:24

CSS樣式不隱藏正確的圖像手機

回答

相關問題