我使用 boostrap4 创建了一个带有一些图标和文字的个人资料页面。最初,我使用 chrome iPhone 6 模拟器来测试对齐情况,一切正常(见图)。但是当我在真正的 iphone 6 上的 webview 上启动它时。对齐都搞砸了(见图)。我不知道要调整什么,因为我不知道出了什么问题。我创建了一个 JSFiddle .请帮忙。
在 Chrome 模拟器上
在 iPhone 6 上的 WebView 上
代码
<style>
#sfitness{
position:relative;
}
* {
box-sizing: border-box;
font-family:Arial;
font-size:12px;
}
img {
width: 100%;
}
.name{
float:left;
}
.name span{
display:block;
text-transform:none;
font-size:10px;
}
.name p{
text-transform:uppercase;
font-size:12px;
line-height:11px;
}
.credit{
text-align:right
}
.credit img{
width:15px;
height:15px;
}
.eventPic img{
width:40px;
height:40px;
}
.eventText{
vertical-align:middle;
margin-top:8px;
margin-left:-48px;
}
.eventText p{
text-transform:uppercase;
font-size:14px;
line-height:13px;
color:#00B3F0;
}
.eventText span{
display:block;
text-transform:none;
font-size:10px;
color:black;
}
.line{
width:90%;
margin-top:-10px;
margin-left:10%;
margin-right:10%;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
</style>
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="col name" style="margin:-40px 20px 0">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
</div>
<div class="row">
<div class="col credit">
<img src="https://image.ibb.co/n0Sy39/credits.png" border="0"><span style="font-size:10px"> 999 CREDITS </span><!--
--> <img src="https://image.ibb.co/fdOwO9/points.png" alt="points" border="0"/><span style="font-size:10px"> 888 POINTS</span>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" onclick="document.location='checkin'">
<div class="col-4 eventPic text-center">
<img src="https://image.ibb.co/ix10i9/icon_checkin.png">
</div>
<div class="col-8 eventText" >
<p>CHECK IN <span>Scan QR code to Check In</span></p>
</div>
<div class="line">
<hr />
</div>
</div>
<div class="row" onclick="document.location.href='loyalty.asp?memcode=<%=sMemCode%>&lang=<%=sLang%>'">
<div class="col-4 eventPic text-center">
<img src="https://image.ibb.co/grLnVp/con_loyalty.png" alt="con_loyalty" border="0">
</div>
<div class="col-8 eventText" >
<p>LOYALTY <span>Exchange with your loyalty point</span></p>
</div>
<div class="line">
<hr />
</div>
</div>
</div>
最佳答案
我已经更新了 fiddle ,请查看 here .
您可以相应地更改 css,我认为这可能会有所帮助。
<div class="clearfix float-my-children">
<img src="https://image.ibb.co/ix10i9/icon_checkin.png" style="width:40px;height:40px" >
<div style="padding-top: 12px;">CHECK IN <span>Scan QR code to Check In</span></div>
.float-my-children > * {
float:left;
margin-right:5px;
}
/* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */
.clearfix {
*zoom:1 /* for IE */
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
关于ios - iPhone webview 上的引导网格系统对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51818759/