轮播项目未显示在移动视图上
问题描述 投票：0回答：1
我正在使用 boostrap Carousel，我在笔记本电脑视图中的图像上放置了一些项目，它看起来很完美，但在移动视图上项目没有显示
这是笔记本电脑视图
这是手机视图
<section class="hero-wrap">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/bg_1.jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<div class="overlay"></div>
<div class="container">
<div class="row slider-text ">
<div class="col-md-10 ftco-animate text-center">
<br><br>
<div class="icon">
<span class="flaticon-lotus"></span>
</div>
<h1>Spa & Beauty Center</h1>
<div class="row justify-content-center">
<div class="col-md-7 mb-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia
and
Consonantia,
there live the blind texts.</p>
</div>
</div>
<p>
<a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a>
<a href="booking.php"
class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="images/bg_2.jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<div class="overlay"></div>
<div class="container">
<div class="row slider-text">
<div class="col-md-10 ftco-animate text-center">
<div class="icon">
<span class="flaticon-lotus"></span>
</div>
<h1>Spa & Beauty Center</h1>
<div class="row justify-content-center">
<div class="col-md-7 mb-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia
and
Consonantia,
there live the blind texts.</p>
</div>
</div>
<p>
<a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a>
<a href="booking.php"
class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="images/bg_3.jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<div class="overlay"></div>
<div class="container">
<div class="row slider-text">
<div class="col-md-10 ftco-animate text-center">
<div class="icon">
<span class="flaticon-lotus"></span>
</div>
<h1>Spa & Beauty Center</h1>
<div class="row justify-content-center">
<div class="col-md-7 mb-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia
and
Consonantia,
there live the blind texts.</p>
</div>
</div>
<p>
<a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a>
<a href="booking.php"
class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And css code is
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat scroll center scroll;
\--webkit-background-size: cover;
background-size: cover;
}
.carousel-item::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.1;
}
.carousel-caption{
bottom:75px;
padding-left:200px;
padding-right:50px;
}
@media (max-width: 600px) {
.carousel-item {
height: 0;
min-height: 270px;
}
}
我正在使用 boostrap Carousel，我在笔记本电脑视图中的图像上放置了一些项目，它看起来很完美，但在移动视图上项目没有显示
这是笔记本电脑视图
这是手机视图
1个回答
0
投票
投票
这是因为 Bootstrap 将 .d-none 类显示为 none（带有 !important）。如果您想覆盖 Bootstrap 并在小屏幕中显示它，请使用内联 css（在 HTML 中）。然后，您还需要为小屏幕添加相应的样式（减小按钮的大小..）
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat scroll center scroll;
/* --webkit-background-size: cover; */
background-size: cover;
}
.carousel-item::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.1;
}
.carousel-caption{
bottom:75px;
padding-left:200px;
padding-right:50px;
}
@media (max-width: 600px) {
.carousel-item {
height: 0;
min-height: 270px;
}
} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<section class="hero-wrap">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block" style="display:block !important;">
<div class="overlay"></div>
<div class="container">
<div class="row slider-text ">
<div class="col-md-10 ftco-animate text-center">
<br><br>
<div class="icon">
<span class="flaticon-lotus"></span>
</div>
<h1>Spa & Beauty Center</h1>
<div class="row justify-content-center">
<div class="col-md-7 mb-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia
and
Consonantia,
there live the blind texts.</p>
</div>
</div>
<p>
<a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a>
<a href="booking.php"
class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/237/200/300" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block" style="display:block !important;">
<div class="overlay"></div>
<div class="container">
<div class="row slider-text">
<div class="col-md-10 ftco-animate text-center">
<div class="icon">
<span class="flaticon-lotus"></span>
</div>
<h1>Spa & Beauty Center</h1>
<div class="row justify-content-center">
<div class="col-md-7 mb-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia
and
Consonantia,
there live the blind texts.</p>
</div>
</div>
<p>
<a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a>
<a href="booking.php"
class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/seed/picsum/200/300" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block" style="display:block !important;">
<div class="overlay"></div>
<div class="container">
<div class="row slider-text">
<div class="col-md-10 ftco-animate text-center">
<div class="icon">
<span class="flaticon-lotus"></span>
</div>
<h1>Spa & Beauty Center</h1>
<div class="row justify-content-center">
<div class="col-md-7 mb-3">
<p>Far far away, behind the word mountains, far from the countries Vokalia
and
Consonantia,
there live the blind texts.</p>
</div>
</div>
<p>
<a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a>
<a href="booking.php"
class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>最新问题
- 读取 FIFO 文件时避免 100% cpu
- （Vue3 / Vite）不渲染嵌套的外部vue组件
- svg 和其他元素之间的白线
- 循环线性相关函数不返回 F 统计量或 p 值
- 如何升级rubygems
- 在 SQLAlchemy 中获取表名
- ASP.NET Web API 密钥身份验证|天蓝色
- 如何将自定义“卡片”保存到 dart/flutter 中的共享首选项？
- 将数据从一个数据库复制到另一个数据库（.mdb 到 .accdb）
- 如何在Power BI中将多个散点图合并为一个？
- Perl Net::OpenSSH 连接到需要 RSA 和密码的服务器
- 为什么 TODAY() 函数不适用于 DATESBETWEEN？
- Jitterbit - 如何从重定向 URL 捕获响应标头（位置）
- 如何记录 sqlalchemy 中返回的 SQL 语句和行以帮助调试？
- 井字棋将随机执行获胜功能
- 使用Node Crawler时，一旦爬行完成，就没有进一步的链接。然后我如何触发代码来输出结果
- jit JAX 函数中的迭代器
- Google Play 预发布报告中的崩溃问题：java.lang.IllegalStateException
- Django 模板：翻译包含变量
- 为什么在 psycopg2 中占位符比文字更受欢迎？
© www.soinside.com 2019 - 2024. All rights reserved.