布局在其中一个页面上不起作用

Question

我在大多数页面上都使用了 ionic 的网格，并且效果很好。但是，在 contacts 页面上，它在 Android 上完全折叠。

尝试在此处上传图片，但图片尺寸过大。可以在ionic forum though查看

基本上在浏览器和大多数其他窗口中，网格都有效。但是在那一页上，它在Android上不起作用，但在浏览器中很好。如果行根本不起作用，那是有道理的，但只有 1 页！

代码：

<ion-item ng-repeat="friend in friends | orderBy:'state.substr(1,2)'" type="item-text-wrap" ng-class="{{friend.state}}"  href="#/tab/friend/{{friend.id}}">
    <div  class="row">
        <div class="col-75">
            {{friend.name}} <br>
            <h6>{{friend.group}}<h6>
        </div>
        <div class="col-10">
             <i class="icon ion-flag {{friend.state}}"></i>
        </div>
        <div class="col-10">
            <label class="toggle toggle-assertive">
                <input type="checkbox" ng-checked="friend.ban">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </div>

    </div>
</ion-item>

Answer 1

试试这个 HTML sn-p：

<ion-item ng-repeat="friend in friends | orderBy:'state.substr(1,2)'" type="item-text-wrap" ng-class="{{friend.state}}"  href="#/tab/friend/{{friend.id}}">
    <div  class="row">
        <div class="col-75">
            {{friend.name}} <br>
            <h6>{{friend.group}}<h6>
        </div>
        <div class="col-10">
             <i class="icon ion-flag {{friend.state}}"></i>
        </div>
        <div class="col">
            <label class="toggle toggle-assertive" style="float:right;margin-right:5px;">
                <input type="checkbox" ng-checked="friend.ban">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </div>

    </div>
</ion-item>

基本上，将 col-10 放在第一列之后的第二列。因此，我们改为移除显式列大小，并将列内的整个内容浮动到右侧。