按钮没有放在正确的位置答案

【问题标题】：Button not put to the right place按钮没有放在正确的位置
【发布时间】：2018-03-23 16:26:38
【问题描述】：

我使用 bootstrap 4、thymeleaf 和数据表

在右边的桌子上我试着放一个按钮

 <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

【问题讨论】：

可能是因为数据表？你能给我们一个jsbin.com吗？
请贴出所有相关代码
工作正常fiddle.jshell.net/bhuwanb9/radorL3a
哼你的表没有初始化...所以你没有搜索框...

标签： javascript html css datatables bootstrap-4

【解决方案1】：

float-right 应该在按钮上...

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

【讨论】：

【解决方案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>

【讨论】：