Question

我的内容在台式机和其他小型设备上运行良好，但在iPad横向视图（屏幕尺寸1024pX768）中，我遇到了问题，当我单击菜单侧栏上的切换时，它与现有内容重叠。我们正在使用bootstap 3

单击菜单切换时，我不想在该区域中重叠div内容。

在第一张图像中，单击切换菜单按钮时看起来很好，它将被重叠。

我的HTML代码是：

 <div class="row">
    <div class="box-hseader">
        <div class="col-md-6 col-sm-6">
            <div class="col-md-3" style="padding: 0 6px 0px 0px">
                <a class="btn btn-app boxFlat "   ng-click="totalComplaints()">
                    <div class="col-mds-3">
                        <span>Total: {{commonareacount||0}}</span>
                    </div>
                </a>

            </div>
            <div class="col-md-3" style="padding: 0 6px">
                <a class="btn btn-app boxFlat"  ng-click="isSolved()">
                    <div class="col-mds-3">
                        <span>Solved: {{commonareacountsolved||0}}</span>

                    </div>
                </a>
            </div>
            <div class="col-md-3" style="padding: 0 6px">
                <a class="btn btn-app boxFlat "  ng-click="isUnsolved()">
                    <div class="col-mds-3">
                        <span>Unsolved: {{commonareacountpending||0}}</span>
                    </div>
                </a>
            </div>
            <div class="col-md-3" style="padding: 0 6px">
                <a class="btn btn-app boxFlat "  ng-click="isCancelled()">
                    <div class="col-mds-3">
                        <span>Cancelled: {{commoncanceled||0}}</span>
                    </div>
                </a>
            </div>




        </div>
        <div class="col-md-2">
            <div class="form-group form-inline pull-right rghtFlt">
                <select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter"
                    ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
                    <option value="All">All roles</option>
                    <option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
                </select>

            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-search" aria-hidden="true"></i>
                </span>
                <input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
                    placeholder="Search ">
            </div>
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-success pull-right iPhn5cbtn" data-toggle="modal"
                data-whatever="@getbootstrap" data-target="#exportComplaintsId"
                ng-click="getComplaintId(1)" data-keyboard="false">Export
            </button>
        </div>
    </div>


</div>

我的CSS代码是：

@media only screen and (max-width: 320px){
       .rghtFlt{
        float: none !important;
    }
 }


 @media only screen and (max-width: 568px) {
    .rghtFlt{
        float: none !important;
    }
}

@media only screen and (max-width: 640px) {
     .rghtFlt{
        float: none !important;
    }
 }

.boxFlat {
position: relative;
border-radius: 3px;
background: #ffffff;
margin-bottom: 20px;
width: 100%;
box-shadow: 5px 5px 5px 6px rgba(0, 9, 0, 0.1);
}

切换导航JS脚本：

 // toggle nav bar
function openNav() {


  var marginLeftContent = document.getElementById("user_name");

  if (marginLeftContent.style.display === 'none') {

    var elements = document.getElementsByClassName('displayIcon');

    for (var i = 0; i < elements.length; i++) {
      elements[i].style.display = 'inline-block';
    }
    document.getElementById("sidebar-left").style.width = "230px";
    // document.getElementsByClassName("displayIcon")[0].style.display = "none";
    document.getElementById("user_name").style.display = "block";
    document.getElementById("main-header").style.marginLeft = "228px";
    document.getElementById("main-footer").style.marginLeft = "230px";
    document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
    document.getElementById("wrapper").style.backgroundImage = 'none';
    document.getElementById("content-wrapper").style.marginLeft = '230px';

  } else {

    var elements = document.getElementsByClassName('displayIcon');

    for (var i = 0; i < elements.length; i++) {
      elements[i].style.display = 'none';
    }
    document.getElementById("sidebar-left").style.width = "70px";
    // document.getElementsByClassName("displayIcon")[0].style.display = "none";
    document.getElementById("user_name").style.display = "none";
    document.getElementById("main-header").style.marginLeft = "70px";
    document.getElementById("main-footer").style.marginLeft = "70px";
    document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
    document.getElementById("wrapper").style.backgroundImage = 'none';
    document.getElementById("content-wrapper").style.marginLeft = '69px';

  }

}

Answer 1

最终实现了我期望的结果，在工作之后，我创建了自定义列宽度代码而不是bootstrap width类

我的CSS代码：

    .col-md-1-complnts {
    width: 12.29%;
}
.col-md-1-complnts-four {
    width: 5%;
}

.col-md-4-complnts-search {
    width: 41% ;
}

我的HTML代码：

<div class="row">

    <div class="col-md-1-complnts-four col-xs-2 " style="position: initial !important;">
        <button type="button" class="btn btn-info " ng-click="backtodashboard()"><i
        class="fa fa-reply"></i></button>
    </div>

    <div class="col-md-2 col-xs-6" style="position: initial !important; margin-top: 0px !important;    margin-bottom: 15px;">
        <button type="button" class="btn btn-success" data-toggle="modal" style="width: 100%"
        data-target="#complaisntsmodel" data-whatever="@getbootstrap" ng-click="complaints();complaintsresp();setFormPristine()"
        data-keyboard="false"> 
            <i class="fa fa-plus-circle"></i>
        Rise Complaint
        </button>
    </div>


    <div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
        <a class="btn btn-app boxFlat" ng-click="totalPlayComplaints()">
            <div class="col-mds-3">
                <span>Total:Play {{playareacount||0}}</span>
            </div>
        </a>
    </div>

    <div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
        <a class="btn btn-app boxFlat"  ng-click="isPlaySolved()">
            <div class="col-mds-3">
                <span>Solved: {{playareacountsolved||0}}</span>
            </div>
        </a>
    </div>

    <div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
        <a class="btn btn-app boxFlat "  ng-click="isPlayUnsolved()">
            <div class="col-mds-3">
                <span>Unsolved: {{playareacountpending||0}}</span>
            </div>
        </a>
    </div>

    <div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
        <a class="btn btn-app boxFlat "  ng-click="isPlayCancelled()">
            <div class="col-mds-3">
                <span>Cancelled: {{playAreacanceled||0}}</span>
            </div>
        </a>
    </div>


    <div class="col-md-3 col-xs-10  " style="position: initial !important;" >
        <div class="form-group form-inline ">
            <select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter" style="width: 100%"
            ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
                <option value="All" >All roles</option>
                <option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
            </select>
        </div>
    </div>


    <div class="col-md-4-complnts-search col-xs-12 " style="position: initial !important; margin-bottom: 10px; ">
        <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-search" aria-hidden="true"></i>
                </span>
            <input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
            placeholder="Search ">
        </div>
    </div>


    <div class="col-md-1-complnts col-xs-6" style="position: initial !important; margin-top: 0px !important;    margin-bottom: 15px;" >
        <button type="button" class="btn btn-success " style="width: 100% !important" data-toggle="modal" data-whatever="@getbootstrap" data-target="#exportComplaintsId" ng-click="getComplaintId(2)" data-keyboard="false">Export
        </button>
    </div>
</div>

切换导航JS中没有任何改变

Ipad横向视图中的内容重叠

1 个答案: