ブートストラップ： - 画面サイズごとに2つの異なるイメージを表示する方法

Question

私はブートストラップの初心者であり、応答するテンプレートを作成するプロジェクトに取り組んでいました。

私はいくつかの問題に直面しています。

コードは以下の通りである： -

<div class="container"> 

    <div class="row"> 
    <div class="col-xs-12"> 
     <img src="../images/delights/website_layout_hd_mobikwik.jpg" style="width: 100%;" alt=""> 
     <img src="../images/delights/shop_for_men_button.png" alt="" style="margin: -43% 0% 0% 11%;float: left;position: relative;width: 17%;cursor: pointer" ui-sref="home.productgrid.collection({url:'new-arrivals-for-men',utm_source:'website',utm_medium:'delight-page',utm_content:'buttonlink',utm_campaign:'Shop-for-Men-30th-May'})"> 
     <img class="combo" src="../images/delights/shop_for_women_button.png" alt="" style="margin: -43% 0% 0% 33%;float: left;position: relative;width: 17%;cursor: pointer" ui-sref="home.productgrid.collection({url:'new-arrivals-for-women',utm_source:'website',utm_medium:'delight-page',utm_content:'buttonlink',utm_campaign:'Shop-for-Women-30th-May'})"> 
    </div> 
    </div> 
    <!-- main container class ends--> 
    <div class="row hidden-lg hidden-md hidden-sm visible-xs"> 
    <div class="col-xs-6"> 
     <img class="img img-responsive" src="../images/delights/mobile_site_layout_720_05.png" style="height: auto;padding: 2px;" ui-sref="home.productgrid.collection({url:'new-arrivals-for-men',utm_source:'mobile',utm_medium:'delight-page',utm_content:'buttonlink',utm_campaign:'Shop-for-Men-30th-May'})"> 
    </div> 
    <div class="col-xs-6"> 
     <img class="img img-responsive" src="../images/delights/mobile_site_layout_720_07.jpg" style="height: auto;padding: 2px;" ui-sref="home.productgrid.collection({url:'new-arrivals-for-women',utm_source:'mobile',utm_medium:'delight-page',utm_content:'buttonlink',utm_campaign:'Shop-for-Women-30th-May'})"> 
    </div> 
</div> 
</div> 

画像が異なるモバイルデスクトップ別のものであり、画面サイズごとに変更する必要があり、最初の行の画像。

私はそれを行う方法がわかりません。

は私がhelp.Thanksを取得する場合

Answer 1

は、構文エラーが発生したあなたは、クラス= "COL-XS-6" にのみCOL-XS-6を使用し

<div class="col-xs-6"> 
     <img class="img img-responsive" src="../images/delights/mobile_site_layout_720_05.png" style="height: auto;padding: 2px;" ui-sref="home.productgrid.collection({url:'new-arrivals-for-men',utm_source:'mobile',utm_medium:'delight-page',utm_content:'buttonlink',utm_campaign:'Shop-for-Men-30th-May'})"> 
    </div> 
    <div class="col-xs-6"> 
     <img class="img img-responsive" src="../images/delights/mobile_site_layout_720_07.jpg" style="height: auto;padding: 2px;" ui-sref="home.productgrid.collection({url:'new-arrivals-for-women',utm_source:'mobile',utm_medium:'delight-page',utm_content:'buttonlink',utm_campaign:'Shop-for-Women-30th-May'})"> 
    </div> 

Answer 2

をクラスを追加いいだろう。クラス= "" あなたのコードをこれで置き換えています。