代码之家 › 专栏 › 技术社区 › Hanz Cheah

iphonewebview上的引导网格系统对齐问题

bootstrap-4 webview css ios

Hanz Cheah · 技术社区 · 6 年前

我使用boostrap4创建了一个带有一些图标和文字的个人资料页面。最初,我用ChromeiPhone6模拟器测试了对齐情况,一切正常(见图)。但当我在真正的iphone6上用webview发布它时。路线都乱了(见图)。我不知道该怎么调整,因为我不知道哪里出了问题。我创造了一个 JSFiddle . 请帮忙。

在Chrome模拟器上

在iphone6上的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><!--
            -->&nbsp;&nbsp;<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>

2 回复 | 直到 6 年前

Narendra Sharma 6 年前

我已经更新了小提琴,请检查一下 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;
}

Allan Jebaraj 6 年前

你给了这个容器负的边距。

.eventText{
            vertical-align:middle; 
            margin-top:8px;
            margin-left:-48px;
        }

改变 margin-left 到 0px 它会被解决的。