Question

我使用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><!--
            -->&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>

Answer 1

我已经更新了小提琴，请查看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;
}

Answer 2

您为此容器指定了负边距。

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

将margin-left更改为0px即可解决。

iPhone Webview上的Bootstrap Grid System对齐问题

2 个答案: