Javascript 如何修复dataTables搜索框和分页位置问题？

我的数据表有2个问题，其中：

为什么我的“搜索”和“分页”位置不正确？为什么它在中间？应该在蓝色盒子里

为什么像素变为移动视图时没有“加号”符号

HTML

<table id="manageadmin" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
    <thead>
        <tr>
            <th class="text-center">Name</th>
            <th class="text-center">Username</th>
            <th class="text-center">Email</th>
            <th class="text-center">Division/Unit</th>
            <th class="text-center">Workgroup</th>
            <th class="text-center">Status Account</th>
            <th class="text-center">Action</th>
        </tr>
    </thead>
</table>

导入JS

$(document).ready( function () {
    var table = $('#manageadmin').DataTable( {
        ajax: { 
            url: 'assets/data/dummy.json',
            crossDomain : true,
            type : "GET",
            cache : false,
            dataType : "json",
            contentType: "application/json",
            dataSrc : "data"
        },
        columns: [
            { data : "fullname", "className": "text-center" },
            { data : "username", "className": "text-center" },
            { data : "email", "className": "text-center" },
            { data : "divunit", "className": "text-center" },
            { data : "workgroup", "className": "text-center" },          

        ],
    });
});

<script src="src/plugins/jQuery-3.2.1/jquery-3.2.1.min.js"></script>
<script src="src/plugins/bootstrap-4.0.0/dist/js/popper.min.js"></script>
<script src="src/plugins/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>
<script src="src/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="src/plugins/datatables/media/js/dataTables.bootstrap4.js"></script>
<script src="src/plugins/datatables/media/js/dataTables.responsive.js"></script>
<script src="src/plugins/datatables/media/js/responsive.bootstrap4.js"></script>
<script src="src/plugins/bootstrap-switch/js/bootstrap-switch.js"></script>

其他一些css正在覆盖Datatable css。检查和检查搜索元素cssyou很棒，我忘了包括datatables css。