按鈕未正確放置

Question

我使用bootstrap 4，thymeleaf和datatable

在表格右上方，我嘗試按下一個按鈕

 <div class="col-sm-12">
     <div class="float-right">
         <button id="newUsers" type="button" th:onclick="@{/newusers}" class="btn btn-primary" th:text="#{user.new}">Nouveau utilisateur</button>
     </div>
 </div>

我用col-sm-12占用了所有空間

<table id="usersTable" class="table table-striped table-bordered" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th th:text="#{user.id}">Id</th>
            <th th:text="#{user.login}">Login</th>
            <th th:text="#{user.firstname}">Firstname</th>
            <th th:text="#{user.lastname}">LastName</th>
            <th th:text="#{user.roles}">Roles</th>
        </tr>
    </thead>
</table>

如您所見，按鈕不正確

編輯：將代碼添加到初始化表

    $(document).ready(function() {
    var url = "/users";
    $('#usersTable').DataTable({
        "bLengthChange": false, //hide 'show entries dropdown
        'processing': true,
        'serverSide': true,
        'pagingType': 'simple_numbers',
        'ajax': {
            type: 'get',
            'url': url,
            'data': function(d) {
                var current = $('#usersTable').DataTable();
                d.page = (current != undefined) ? current.page.info().page : 0;
                d.size = (current != undefined) ? current.page.info().length : 5;
                d.sort = d.columns[d.order[0].column].data + ',' + d.order[0].dir;
                //return JSON.stringify( d );
            }
        },
        "columns": [{
                "data": "id"
            },
            {
                "data": "username"
            },
            {
                "data": "firstname"
            },
            {
                "data": "lastname"
            },
            {
                "data": "username"
            }
        ]
    });
});

無論如何提出建議的解決方案，但是不與文本框對齊，將需要與數據表進行檢查

編輯2

為了增加更好的集成，此擴展可能是一個解決方案

https://datatables.net/extensions/buttons/examples/initialisation/custom.html

Answer 1

float-right按鈕應位於按鈕上...

<div class="col-sm-12">
     <button id="newUsers" type="button" class="btn btn-primary float-right">Nouveau utilisateur</button>
</div>

Answer 2

如果按照您說的那樣給它100％的寬度並將其正確對齊，則應轉到屏幕示例的最右邊：

 .col-sm-12 { width: 100%; text-align: right; } 

 <div class="col-sm-12"> <div class="float-right"> <button id="newUsers" type="button" th:onclick="@{/newusers}" class="btn btn-primary" th:text="#{user.new}">Nouveau utilisateur</button> </div> </div> <table id="usersTable" class="table table-striped table-bordered" width="100%" cellspacing="0"> <thead> <tr> <th th:text="#{user.id}">Id</th> <th th:text="#{user.login}">Login</th> <th th:text="#{user.firstname}">Firstname</th> <th th:text="#{user.lastname}">LastName</th> <th th:text="#{user.roles}">Roles</th> </tr> </thead> </table>