我已经使用引导程序制作了一张卡片。这些列在所有设备中均能正常工作。但是它们在任何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>
我试图更改显示属性,但这没有帮助。
答案 0 :(得分:0)
在您的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;
}
}