时间戳

首页 > 解决方案 > 我有一个轮播在桌面上一次显示 4 张图像。我希望在移动视图中一次只显示一张图像

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

问题描述

我尝试了很多以使其具有响应性，但没有成功。如何使这个轮播响应？在移动设备中应仅显示一张图像，在笔记本电脑中应显示 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>

标签： htmlcss

解决方案

我认为您正在寻找的是媒体查询，您可以在其中为一系列屏幕分辨率的特定选择器定义 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>

推荐阅读