html - 轮播仅针对小屏幕显示全屏
问题描述
我有一个居中的旋转木马,通过将它添加到“w-50”类中只占据屏幕的一半。当浏览器调整为较小的屏幕(如移动设备)时,我希望轮播占据整个屏幕宽度。为此,我确定我需要找到一种方法将其更改为“w-100”,但我不确定如何去做。
我曾尝试在 CSS 中使用 @media,但没有任何运气。
<div id="catalogueSelection">
<div id="catalogueCarousel" class="carousel slide w-50" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#catalogueCarousel" data-slide-to="0" class="active"></li>
<li data-target="#catalogueCarousel" data-slide-to="1"></li>
<li data-target="#catalogueCarousel" data-slide-to="2"></li>
<li data-target="#catalogueCarousel" data-slide-to="3"></li>
<li data-target="#catalogueCarousel" data-slide-to="4"></li>
<li data-target="#catalogueCarousel" data-slide-to="5"></li>
<li data-target="#catalogueCarousel" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img id="franceImage" class="d-block w-100" src="../images/france.jpg">
<div class="carousel-caption countryCaption">
<h2>France</h2>
<p>See Products</p>
</div>
</div>
<div class="carousel-item">
<img id="italyImage" class="d-block w-100" src="../images/italy.jpg">
<div class="carousel-caption countryCaption">
<h2>Italy</h2>
<p>See Products</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/spain.jpg">
<div class="carousel-caption countryCaption">
<h2>Spain</h2>
<p>See Products</p>
</div>
</div>
<div class="carousel-item">
<img id="lebanonImage" class="d-block w-100" src="../images/lebanon.jpg">
<div class="carousel-caption countryCaption">
<h2>Lebanon</h2>
<p>See Products</p>
</div>
</div>
<div class="carousel-item">
<img id="southAfricaImage" class="d-block w-100" src="../images/south_africa.jpg">
<div class="carousel-caption countryCaption">
<h2>South Africa</h2>
<p>See Products</p>
</div>
</div>
<div id="southAmericaImage" class="carousel-item">
<img class="d-block w-100" src="../images/south_america.jpg">
<div class="carousel-caption countryCaption">
<h2>South America</h2>
<p>See Products</p>
</div>
</div>
<div id="domesticImage" class="carousel-item">
<img class="d-block w-100" src="../images/united_states.jpg">
<div class="carousel-caption countryCaption">
<h2>Domestic</h2>
<p>See Products</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#catalogueCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#catalogueCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
#catalogueCarousel {
margin: auto;
border: 3px solid;
border-color: black;
}
.carousel-inner {
}
.carousel-item img {
height: 500px; !important
overflow: hidden;
opacity: 0.9;
opacity: 0.8;
}
.countryCaption h2 {
color: red;
font-family: 'Prosto One', cursive;
opacity: 1; !important
}
.countryCaption p{
color: darkred;
font-weight: bold;
font-family: 'Prosto One', cursive;
font-size: 20px;
opacity: 1; !important
}
上面是轮播 html 代码的片段,以及它的样式表。感谢任何帮助我解决此问题的提示或想法。
谢谢你。
解决方案
您只需要为小型设备添加媒体查询。在样式表中添加下面的 CSS 我希望它能解决您的问题。谢谢
@media only screen and (max-width: 768px) {
#catalogueCarousel {
width: 100% !important;
}
}
推荐阅读
- javascript - 我如何仅通过查看号码来确定国家/地区代码
- angular-cli - Angular cli 7 组件不会在自定义标记调用上呈现 html
- powershell - 比较两个文本文件并将差异写入文本文件
- angular - IF/ELSE IF/ELSE 以 Observable 作为条件
- java - 我的布局在低 dpi 设备上无法正确缩放
- reactjs - 酶检测组件 onClick 动作
- python - Python setup.py - 运行 setup.py 安装时不构建轮子
- oracle - 在 Oracle 中更新查询引发临时空间问题
- python - 熊猫从日期范围列中提取开始和结束日期
- python - “str”对象没有属性“read”