html - Bootstrap 列无法在 ios 设备上正常运行
问题描述
我使用引导程序制作了一张卡片。这些列在所有设备中都可以正常工作。但是它们在任何 ios 设备中都会完全改变。附上截图。
http://projecttesting.tk/sfl/test.html 是我在测试服务器上的卡片。
小提琴:https ://jsfiddle.net/Lhjm8ztn/
<section class="card__list row">
<div class="card__box col-md-12 col-sm-12">
<div class="card">
<div class="card__content">
<div></div>
<div class="ribbon"><span>Sponsored</span></div>
<div class="row card__bottom2">
<div class="col-6 col-sm-4 col-md-8 contest">
<img src="index.png" width="25px" height="25px"> <span class="card__title">MyTeam11</span>
<div class="date2">
<span class="time"> (2 Minutes Ago) </span>
</div>
</div>
<div class="col-3 col-sm-4 col-md-2 center3 card__price">
<span class="card__title">66%</span>
<div class="date">
Overlay
</div>
</div>
<div class="col-3 col-sm-4 col-md-2 center3 card__price">
<span class="card__title">25%</span>
<div class="date">
Margin
</div>
</div>
</div>
<div class="row card__bottom">
<div class="col-6 col-sm-4 col-md-4 col-lg-2 left options">
<span class="date weight">
1.6 Million Monster
</span>
<div class="date2">
43.6 % Overlay
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 center card__price">
<span class="date weight"> ₹ 1600000</span>
<div class="date2">
Prizepool
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 right left2 card__price">
<span class="date weight"> 55555</span>
<div class="date2">
Max Entries
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 left center2 card__price">
<span class="date weight"> ₹ 35</span>
<div class="date2">
Entry Fee
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 center left2 card__price">
<progress id="pb0" value="620" max="1760"></progress>
<div class="date2">
620/1760 Joined
</div>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 center2 right card__price">
<div class="date2">
<button type="button" class="btn btncs btn-primary">Join Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
我试图更改显示属性,但没有帮助。
解决方案
在您的 css 代码末尾添加以下代码我希望这应该适用于所有尺寸的 ios
@media(min-width:320px) and (max-width:1024px){
.left2 {
text-align: left !important;
}
.card__price {
text-align: right !important;
}
.left2 {
text-align: left !important;
}
}
推荐阅读
- sql - 按时间段对数据进行分类
- flutter - 我在 dart lang 上有一个相同值的列表。我怎样才能得到他们的每一个索引?
- xcode - 如何将文件从沙盒应用程序正确复制到应用程序脚本文件夹?
- android - 如何为 Android 应用程序的延迟调试做准备
- flutter - Flutter 项目构建失败
- kotlin-multiplatform - Kotlin Js - 访问资源文件夹
- python - 获取bubblesort python的索引和值
- pdf - iText 7个汉字并与现有的pdf模板合并
- java - 如何在使用spring集成从sftp移动到本地目录时将不同的文件保存到不同的位置
- android - Ionic 4 Deeplinking - 如果未安装应用程序,则启动网站