Bootstrap：-如何根据屏幕大小显示两个不同的图像

xeufq47z 于 2023-05-15 发布在 Bootstrap

关注(0)|答案(2)|浏览(115)

我是一个新手在引导和工作的一个项目，使模板响应。
在这个过程中，我遇到了一些问题。
代码如下：-

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

第一行中的图像应根据屏幕大小进行更改，即移动的设备的图像不同，而桌面设备的图像则不同。
我不知道该怎么做。
如果有人帮我就好了谢谢

twitter-bootstrap

来源：https://stackoverflow.com/questions/39039312/bootstrap-how-to-display-two-different-images-as-per-screen-size

2条答案

按热度按时间

dgiusagp1#

将只使用col-xs-6的类添加到class=“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>

赞(0）回复(0）举报 2023-05-15

myzjeezk2#

在这里，它将工作只是复制粘贴此代码：
依赖关系：Bootstrap 5

突出显示的行：

<img  class="d-none d-md-block" alt="..." class="d-block w-100" src="https://dummyimage.com/1509x600/000/fff">
   <img  class="d-block d-sm-none" alt="..." class="d-block w-100" src="https://dummyimage.com/568x550/000/fff">

下面的代码带有html和bootstrap

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'>
  <!-- Font Awesome CSS -->
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
  <!-- Google Fonts -->


<div class="carousel-inner">
  <div class="carousel-item active">
    <img class="d-none d-md-block" alt="..." class="d-block w-100" src="https://dummyimage.com/1509x600/000/fff">
    <img class="d-block d-sm-none" alt="..." class="d-block w-100" src="https://dummyimage.com/568x550/000/fff">


    <div class="carousel-caption">
      <h5 class="animated bounceInRight" style="animation-delay: 1s">Web Design</h5>
      <p class="animated bounceInLeft d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
      <p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Learn More</a></p>
    </div>
  </div>
  <div class="carousel-item">
    <img class="d-none d-md-block" alt="..." class="d-block w-100" src="https://dummyimage.com/1509x600/000/fff">
    <img class="d-block d-sm-none" alt="..." class="d-block w-100" src="https://dummyimage.com/568x550/000/fff">
    <div class="carousel-caption">
      <h5 class="animated bounceInRight" style="animation-delay: 1s">Graphics Design</h5>
      <p class="animated bounceInLeft d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
      <p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Learn More</a></p>
    </div>
  </div>
  <div class="carousel-item">
    <img class="d-none d-md-block" alt="..." class="d-block w-100" src="https://dummyimage.com/1509x600/000/fff">
    <img class="d-block d-sm-none" alt="..." class="d-block w-100" src="https://dummyimage.com/568x550/000/fff">
    <div class="carousel-caption">
      <h5 class="animated bounceInRight" style="animation-delay: 1s">Photography</h5>
      <p class="animated bounceInLeft d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
      <p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Learn More</a></p>
    </div>
  </div>
</div><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselExampleIndicators" type="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span
            class="visually-hidden">Previous</span></button> <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#carouselExampleIndicators" type="button"><span aria-hidden="true"
            class="carousel-control-next-icon"></span> <span class="visually-hidden">Next</span></button>
</div>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'></script>

赞(0）回复(0）举报 2023-05-15

我来回答

Bootstrap：-如何根据屏幕大小显示两个不同的图像

2条答案

相关问题

热门标签

最新问答