html - 小屏幕上最小高度的引导轮播最小值
问题描述
我在我的页面上使用带有轮播的 Bootstrap 4.4.1 框架 carousal 有多个 1920x250 像素尺寸的图像,这对于大屏幕来说很好,较小的屏幕轮播图像高度也会降低,并且在手机上看起来太小了,
我想控制不同屏幕的高度,例如 iPhone(414 宽度)我想将横幅高度保持为最小 200 像素高度。
我可以控制横幅的高度吗,在我的代码中,它维护了方面的无线电和横幅对于小屏幕来说太小了。
示例链接
<!DOCTYPE html>
<html>
<head>
<title>Cours Complet Bootstrap 4</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="carouselhp" class="carousel slide carousel-fade" data-ride="carousel" data-interval="8000">
<ol class="carousel-indicators">
<li data-target="#carouselhp" data-slide-to="0" class="active"></li>
<li data-target="#carouselhp" data-slide-to="1"></li>
<li data-target="#carouselhp" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x250.png?text=Some%20text%20will%20be%20placed%20on%20Banner1" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x250.png?text=Some%20text%20will%20be%20placed%20on%20Banner2" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x250.png?text=Some%20text%20will%20be%20placed%20on%20Banner3" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselhp" 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="#carouselhp" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
解决方案
推荐阅读
- javascript - 通过共享数据目标属性切换两个元素的活动状态
- react-redux - Easy Peasy VS React Redux
- xamarin - Xamarin Forms Entry Binding 两种方式与可为空的小数不允许放置小数点
- markdown - Fitnesse:如何检查路径是否存在
- ionic-framework - 离子电容浏览器自动关闭
- ruby-on-rails - Docker-compose up 由于“fugit” gem 而失败,这甚至不在我的 Gemfile 中
- r - 在 R 中创建一个长字符串向量
- java - java中的.net json属性转换-@JsonProperty
- azure - 设置静态主机名应用服务控制台 Azure
- azure - 更新应用设置时 Azure Functions 是否会引发 503 错误?