更改移动视图的搜索栏和显示位置

Question

当我切换到移动视图时，搜索栏和显示栏会移动到页面中间。我希望它们与页面右侧对齐。我怎样才能做到这一点？我正在使用 Datatables 插件。

代码放在这里https://jsfiddle.net/3k5p2q7g/

@{
    ViewData["Title"] = "Exception Logs";
}

<div class="content">
    <div class="box box-primary" ng-controller="logController" ng-init="init()">
        <div class="box-body">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h1>Exception Logs</h1>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <table class="table table-striped table-bordered" id="table_Logs">
                        <thead>
                            <tr>
                                <th>Time Stamp</th>
                                <th>Exception</th>
                                <th>Message</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {

    <script src="~/js/site/Logs/LogController.js"></script>

}

Answer 1

您可以使用 CSS @media 仅影响移动设备 (max-width=767px)。

CSS

@media max-width: 767px {
    .align-right {
        text-align: right;
    }
}

HTML

<div class="align-right">
    <div class="search">...</div>
    <div class="showbar">...</div>
</div>

Answer 2

@media max-width: 767px {
.dataTables_filter, .dataTables_length {
    float:right !important;
}
}