Question

我是bootstrap的新手，正在开发一个项目，以使模板响应。

在这个过程中我遇到了一些问题。

代码如下： -

<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>

第一行中的图像应根据移动设备的屏幕尺寸而改变，图像不同，桌面设置不同。

我不知道该怎么做。

如果我得到帮助会很好。谢谢

Answer 1

将你只使用col-xs-6的课程加到class =＆＃34; col-xs-6＆＃34;

<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>

Bootstrap： - 如何根据屏幕尺寸

1 个答案: