html - 我有一个在桌面上一次显示 4 张图像的轮播。我希望在移动 View 中一次只显示一张图像

Question

我尝试了很多使它具有响应性，但没有成功。如何使这个轮播响应？在移动设备上只应显示一张图片，在笔记本电脑上应显示 3 张图片，在桌面设备上应显示 4 张图片，如下图所示。

在桌面上显示轮播:

.col-sm-3 {
    float: left;
    padding: 5px  10px;
    text-align: center;
}
.col-xs-12 {
    float: left;
    padding: 5px 10px;
    text-align: center;
}
/* .carousel-indicators {
    float: left;
    display: flex; 
} */

.all {
    padding-top: 15px;
}

img {
    border-radius: 50%;
    padding: 5px 15px 5px 15px;
    height: 145px;
    width: 145px;
}
.carousel-caption {
    color: black;
}
.jumbotron {
    text-align: center;
    color: green;
}

p {
    font-weight: 700;
    color: darkgreen;
    background-color: transparent;
}

<div class="container carousel-inner">
    <div class="carousel-item active">
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/blue.png">
        <div class="carousel-caption" style="color: black;">
            <h5>ABC</h5>
            <p>My Paragraph</p>
      </div>
    </div>    
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>BCD</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/pink.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>CDE</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>DEF</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
    </div>
    <div class="carousel-item">
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/green.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>EFG</h5>
            <p>My Paragraph</p>
      </div>
      </div>    
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/choco.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>FGH</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>GHI</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>HIJ</h5>
            <p>My Paragraph</p>
      </div>
      </div>  
    </div>
    <div class="carousel-item">
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/blue.png">
        <div class="carousel-caption" style="color: black;">
            <h5>IJK</h5>
            <p>My Paragraph</p>
      </div>
      </div>    
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/pink.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>JKL</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>KLM</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col-xs-12 col-sm-4 col-md-3">
        <img src="C:/Users/5023/Desktop/Products/choco.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>LMN</h5>
            <p>My Paragraph</p>
      </div>
      </div>  
    </div>
  </div>

Answer 1

我认为您正在寻找的是媒体查询，您可以在其中为一系列屏幕分辨率的特定选择器定义 CSS。我修改了您的代码(见下文)。

这里最重要的变化是媒体查询:

@media screen and (max-width: 768px) {
    .col {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .col {
        width: 25%;
    }
}

@media screen and (min-width: 992px) {
    .col {
        width: 20%;
    }
}

完整解决方案如下:

.col {
    float: left;
    padding: 5px  10px;
    text-align: center;
}

.carousel-inner {
  height: 250px;
  overflow: hidden;
}
/* .carousel-indicators {
    float: left;
    display: flex; 
} */

.all {
    padding-top: 15px;
}

img {
    border-radius: 50%;
    padding: 5px 15px 5px 15px;
    height: 145px;
    width: 145px;
}
.carousel-caption {
    color: black;
}
.jumbotron {
    text-align: center;
    color: green;
}

p {
    font-weight: 700;
    color: darkgreen;
    background-color: transparent;
}

@media screen and (max-width: 768px) {
    .col {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .col {
        width: 25%;
    }
}

@media screen and (min-width: 992px) {
    .col {
        width: 20%;
    }
}

These queries say for those specific screen widths. Apply the following style to the elements with the "col" class.

<div class="container carousel-inner">
    <div class="carousel-item active">
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/blue.png">
        <div class="carousel-caption" style="color: black;">
            <h5>ABC</h5>
            <p>My Paragraph</p>
      </div>
    </div>    
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>BCD</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/pink.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>CDE</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>DEF</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
    </div>
    <div class="carousel-item">
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/green.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>EFG</h5>
            <p>My Paragraph</p>
      </div>
      </div>    
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/choco.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>FGH</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>GHI</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>HIJ</h5>
            <p>My Paragraph</p>
      </div>
      </div>  
    </div>
    <div class="carousel-item">
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/blue.png">
        <div class="carousel-caption" style="color: black;">
            <h5>IJK</h5>
            <p>My Paragraph</p>
      </div>
      </div>    
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/pink.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>JKL</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/sblue.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>KLM</h5>
            <p>My Paragraph</p>
      </div>
      </div>   
      <div class="col">
        <img src="C:/Users/5023/Desktop/Products/choco.jpg">
        <div class="carousel-caption" style="color: black;">
            <h5>LMN</h5>
            <p>My Paragraph</p>
      </div>
      </div>  
    </div>
  </div>