在我的jQuery v3.3.1 / Bootstrap v4.1.2应用程序中，我尝试在页面的右上方添加按钮。 请打开http://demo2.nilov-sergey-demo-apps.tk/admin/clients 它的凭据为admin@demo.com 111111
包含代码：
<section class="card-body content_block_admin_clients_wrapper ">
<h1 class="card-title">Manage Clients</h1>
<div class="row float-right mr-3">
<button type="button" onclick="javascript:document.location='{{ url('/admin/clients/create') }}'" class="btn btn-primary ">
<span class="btn-label"><i class="fa fa-plus fa-submit-button"></i></span> Add new client
</button>
</div>
<div class="row ">
我有按钮，但是在这种情况下，所有数据表区域都从right移动。 一定不是。
没有此按钮，则看起来像http://demo2.nilov-sergey-demo-apps.tk/admin/warehouses
如何修复？
更新＃1： 由Katy H提出。决策按钮位于搜索输入的下方，但我需要之间 标题和搜索输入，类似https://imgur.com/a/AbTrlQH 但是作为新行，并且在数据网格的右侧没有间隙。 您能否再看一次提供的链接？
谢谢！
答案 0 :(得分：1)
是的。尝试像这样在“搜索”行内移动按钮...
<div class="col-xs-12 col-sm-6 mb-3">
<input class="form-control editable_field string_input " value="" id="filter_name" name="filter_name" type="text" autocomplete="off" placeholder="Enter search string">
</div>
<div class="col-xs-12 col-sm-3 mb-3 mt-1 pl-2">
<input type="submit" class="btn btn-primary" value="Search" onclick="javascript:backendClient.runSearch(oTable); return false;" id="btn_run_search">
</div>
<div class="col-xs-12 col-sm-3 mb-3 mt-1 pl-2">
<button type="button" onclick="javascript:document.location='http://demo2.nilov-sergey-demo-apps.tk/admin/clients/create'" class="btn btn-primary ">
<span class="btn-label"><i class="fa fa-plus fa-submit-button"></i></span> Add new client
</button>
</div>
<div class="table-responsive">
<div id="get-client-dt-listing-table_wrapper" class="dataTables_wrapper no-footer"><div class="dataTables_length" id="get-client-dt-listing-table_length"><label>Show <select name="get-client-dt-listing-table_length" aria-controls="get-client-dt-listing-table" class=""><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option><option value="-1">All</option></select> entries</label>. Shows 25 of 1093 clients</div><div id="get-client-dt-listing-table_filter" class="dataTables_filter" style="display: none;"><label>Search:<input type="search" class="" placeholder="" aria-controls="get-client-dt-listing-table"></label></div><div id="get-client-dt-listing-table_processing" class="dataTables_processing" style="display: none;">Loading clients...</div><table class="table table-bordered table-striped text-primary dataTable no-footer" id="get-client-dt-listing-table" role="grid" aria-describedby="get-client-dt-listing-table_info" style="width: 1439px;">
<thead>
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="get-client-dt-listing-table" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id: activate to sort column descending" style="width: 42px;">Id</th><th class="sorting" tabindex="0" aria-controls="get-client-dt-listing-table" rowspan="1" colspan="1" aria-label="Full Name: activate to sort column ascending" style="width: 173px;">Full Name</th><th class="sorting" tabindex="0" aria-controls="get-client-dt-listing-table" rowspan="1" colspan="1" aria-label="Lead Type: activate to sort column ascending" style="width: 141px;">Lead Type</th><th class="sorting" tabindex="0" aria-controls="get-client-dt-listing-table" rowspan="1" colspan="1" aria-label="Customer Type: activate to sort column ascending" style="width: 201px;">Customer Type</th><th class="sorting" tabindex="0" aria-controls="get-client-dt-listing-table" rowspan="1" colspan="1" aria-label="Account Type: activate to sort column ascending" style="width: 183px;">Account Type</th><th class="sorting" tabindex="0" aria-controls="get-client-dt-listing-table" rowspan="1" colspan="1" aria-label="PO box: activate to sort column ascending" style="width: 142px;">PO box</th><th class="sorting" tabindex="0" aria-controls="get-client-dt-listing-table" rowspan="1" colspan="1" aria-label="Office fax: activate to sort column ascending" style="width: 173px;">Office fax</th><th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 22px;"></th><th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 20px;"></th></tr>
</thead>
<tbody><tr role="row" class="odd"><td class="sorting_1">1</td><td>full_name # 1</td><td>type # 1</td><td>SS</td><td></td><td>po_box # 1</td><td>office_fax # 1</td><td><a href="/admin/clients/1/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(1,'full_name # 1')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">2</td><td>full_name # 2</td><td>type # 2</td><td>SS</td><td></td><td>po_box # 2</td><td>office_fax # 2</td><td><a href="/admin/clients/2/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(2,'full_name # 2')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">3</td><td>full_name # 3</td><td>type # 3</td><td>SS</td><td></td><td>po_box # 3</td><td>office_fax # 3</td><td><a href="/admin/clients/3/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(3,'full_name # 3')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">4</td><td>full_name # 4</td><td>type # 4</td><td>SS</td><td></td><td>po_box # 4</td><td>office_fax # 4</td><td><a href="/admin/clients/4/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(4,'full_name # 4')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">5</td><td>full_name # 5</td><td>type # 5</td><td>SS</td><td></td><td>po_box # 5</td><td>office_fax # 5</td><td><a href="/admin/clients/5/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(5,'full_name # 5')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">6</td><td>full_name # 6</td><td>type # 6</td><td>SS</td><td></td><td>po_box # 6</td><td>office_fax # 6</td><td><a href="/admin/clients/6/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(6,'full_name # 6')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">7</td><td>full_name # 7</td><td>type # 7</td><td>SS</td><td></td><td>po_box # 7</td><td>office_fax # 7</td><td><a href="/admin/clients/7/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(7,'full_name # 7')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">8</td><td>full_name # 8</td><td>type # 8</td><td>SS</td><td></td><td>po_box # 8</td><td>office_fax # 8</td><td><a href="/admin/clients/8/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(8,'full_name # 8')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">9</td><td>full_name # 9</td><td>type # 9</td><td>SS</td><td></td><td>po_box # 9</td><td>office_fax # 9</td><td><a href="/admin/clients/9/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(9,'full_name # 9')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">10</td><td>full_name # 10</td><td>type # 10</td><td>SS</td><td></td><td>po_box # 10</td><td>office_fax # 10</td><td><a href="/admin/clients/10/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(10,'full_name # 10')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">11</td><td>full_name # 11</td><td>type # 11</td><td>SS</td><td></td><td>po_box # 11</td><td>office_fax # 11</td><td><a href="/admin/clients/11/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(11,'full_name # 11')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">12</td><td>full_name # 12</td><td>type # 12</td><td>SS</td><td></td><td>po_box # 12</td><td>office_fax # 12</td><td><a href="/admin/clients/12/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(12,'full_name # 12')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">13</td><td>full_name # 13</td><td>type # 13</td><td>SS</td><td></td><td>po_box # 13</td><td>office_fax # 13</td><td><a href="/admin/clients/13/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(13,'full_name # 13')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">14</td><td>full_name # 14</td><td>type # 14</td><td>SS</td><td></td><td>po_box # 14</td><td>office_fax # 14</td><td><a href="/admin/clients/14/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(14,'full_name # 14')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">15</td><td>full_name # 15</td><td>type # 15</td><td>SS</td><td></td><td>po_box # 15</td><td>office_fax # 15</td><td><a href="/admin/clients/15/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(15,'full_name # 15')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">16</td><td>full_name # 16</td><td>type # 16</td><td>SS</td><td></td><td>po_box # 16</td><td>office_fax # 16</td><td><a href="/admin/clients/16/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(16,'full_name # 16')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">17</td><td>full_name # 17</td><td>type # 17</td><td>SS</td><td></td><td>po_box # 17</td><td>office_fax # 17</td><td><a href="/admin/clients/17/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(17,'full_name # 17')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">18</td><td>full_name # 18</td><td>type # 18</td><td>SS</td><td></td><td>po_box # 18</td><td>office_fax # 18</td><td><a href="/admin/clients/18/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(18,'full_name # 18')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">19</td><td>full_name # 19</td><td>type # 19</td><td>SS</td><td></td><td>po_box # 19</td><td>office_fax # 19</td><td><a href="/admin/clients/19/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(19,'full_name # 19')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">20</td><td>full_name # 20</td><td>type # 20</td><td>SS</td><td></td><td>po_box # 20</td><td>office_fax # 20</td><td><a href="/admin/clients/20/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(20,'full_name # 20')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">21</td><td>full_name # 21</td><td>type # 21</td><td>SS</td><td></td><td>po_box # 21</td><td>office_fax # 21</td><td><a href="/admin/clients/21/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(21,'full_name # 21')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">22</td><td>full_name # 22</td><td>type # 22</td><td>SS</td><td></td><td>po_box # 22</td><td>office_fax # 22</td><td><a href="/admin/clients/22/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(22,'full_name # 22')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">23</td><td>full_name # 23</td><td>type # 23</td><td>SS</td><td></td><td>po_box # 23</td><td>office_fax # 23</td><td><a href="/admin/clients/23/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(23,'full_name # 23')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="even"><td class="sorting_1">24</td><td>full_name # 24</td><td>type # 24</td><td>SS</td><td></td><td>po_box # 24</td><td>office_fax # 24</td><td><a href="/admin/clients/24/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(24,'full_name # 24')"><i class="fa fa-remove a_link"></i></a></td></tr><tr role="row" class="odd"><td class="sorting_1">25</td><td>full_name # 25</td><td>type # 25</td><td>SS</td><td></td><td>po_box # 25</td><td>office_fax # 25</td><td><a href="/admin/clients/25/edit"><i class=" fa fa-edit"></i></a></td><td><a href="#" onclick="javascript:backendClient.deleteClient(25,'full_name # 25')"><i class="fa fa-remove a_link"></i></a></td></tr></tbody></table><div class="dataTables_info" id="get-client-dt-listing-table_info" role="status" aria-live="polite" style="display: none;">Showing 1 to 25 of 1,093 entries</div><div class="dataTables_paginate paging_simple_numbers" id="get-client-dt-listing-table_paginate" style="display: block;"><a class="paginate_button previous disabled" aria-controls="get-client-dt-listing-table" data-dt-idx="0" tabindex="0" id="get-client-dt-listing-table_previous">Previous</a><span><a class="paginate_button current" aria-controls="get-client-dt-listing-table" data-dt-idx="1" tabindex="0">1</a><a class="paginate_button " aria-controls="get-client-dt-listing-table" data-dt-idx="2" tabindex="0">2</a><a class="paginate_button " aria-controls="get-client-dt-listing-table" data-dt-idx="3" tabindex="0">3</a><a class="paginate_button " aria-controls="get-client-dt-listing-table" data-dt-idx="4" tabindex="0">4</a><a class="paginate_button " aria-controls="get-client-dt-listing-table" data-dt-idx="5" tabindex="0">5</a><span class="ellipsis">…</span><a class="paginate_button " aria-controls="get-client-dt-listing-table" data-dt-idx="6" tabindex="0">44</a></span><a class="paginate_button next" aria-controls="get-client-dt-listing-table" data-dt-idx="7" tabindex="0" id="get-client-dt-listing-table_next">Next</a></div></div>
</div>
</div>