我在使用float时遇到了一些麻烦：对;在按钮上。
无论我做什么，按钮都不想向右走。 它是第二个按钮，带有＆＃34;高级搜索按钮＆＃34;类。
我正在使用Bootstrap 4。
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box">
<div class="box-title w-100">
<h5>Opgaver</h5>
</div>
<div class="box-form w-100">
<form action="" class="form-inline">
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Rekvirent">
</div>
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Tildelt til">
</div>
<div class="form-group form-group-custom">
<select name="select_Afsluttet" id="select_Afsluttet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Afsluttet</option>
<option value="">Ja</option>
<option value="">Nej</option>
<option value="">Alle</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Godkendt" id="select_Godkendt" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Godkendt</option>
<option value="">Ja</option>
<option value="">Nej</option>
<option value="">Alle</option>
</select>
</div>
<div class="form-group form-group-custom float-sm-right">
<button type="button" class="btn btn-success btn-sm" style="margin-right: 15px;">Søg</button>
<button type="button" class="btn btn-primary btn-sm advanced-search-button" onclick="advancedSearch(this)">Avanceret søgning</button>
</div>
</form>
<form action="" class="form-inline form-custom advanced-search">
<div class="form-group form-group-custom">
<select name="select_Prioritet" id="select_Prioritet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Prioritet</option>
<option value="">Lav</option>
<option value="">Middel</option>
<option value="">Høj</option>
<option value="">Straks</option>
<option value="">Driftfejl</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Opgavestatus" id="select_Opgavestatus" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Opgavestatus</option>
<option value="">Arkiveret</option>
<option value="">Sendt til DUC</option>
<option value="">Venter på bruger</option>
<option value="">Venter på kunde</option>
<option value="">Venter på AO</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Opgavetype" id="select_Opgavetype" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Opgavetype</option>
<option value="">Andet</option>
<option value="">Sendt til DUC</option>
<option value="">Venter på bruger</option>
<option value="">Venter på kunde</option>
<option value="">Venter på AO</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Underkategori" id="select_Underkategori" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Underkategori</option>
<option value="">Via telefon</option>
<option value="">Via email</option>
<option value="">Internet</option>
<option value="">Intranet</option>
<option value="">VMS</option>
</select>
</div>
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Søg efter">
</div>
</form>
</div>
<div class="box-content">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Dato</th>
<th scope="col">ID</th>
<th scope="col">Rekv</th>
<th scope="col">Tildelt</th>
<th scope="col">Beskrivelse</th>
<th scope="col">Type</th>
<th scope="col">Seneste log besked</th>
<th scope="col">Deadline</th>
</tr>
</thead>
<tbody>
<tr>
<td>22-11-2017</td>
<td>70935</td>
<td>HJR</td>
<td>LUC</td>
<td>Docking Station...</td>
<td>Bestilling - Via Telefon</td>
<td>8 dage</td>
<td>22-11-2017</td>
</tr>
<tr>
<td>28-11-2017</td>
<td>71049</td>
<td>LLJ</td>
<td>LUC</td>
<td>Kan ikke scanne fra sin printe....</td>
<td>IT-Drift - Via Telefon</td>
<td>3 dage</td>
<td>28-11-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
</tbody>
</table>
</div>
</div>
我希望你能帮助我:)。
我没有这个部分的自定义CSS，我只使用JS的类。
答案 0 :(得分：1)
您可以使用 Flexbox ：
执行此类操作
.flex-container {display:flex} /* displays children inline by default */
.flex-item {
display: flex;
justify-content: space-between; /* horizontal alignment / creates the max. horizontal space between the buttons */
flex: 1 !important; /* takes all the remaining horizontal space / needs to have the !important keyword otherwise it doesn't work */
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="box">
<div class="box-title w-100">
<h5>Opgaver</h5>
</div>
<div class="box-form w-100">
<form action="" class="form-inline flex-container">
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Rekvirent">
</div>
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Tildelt til">
</div>
<div class="form-group form-group-custom">
<select name="select_Afsluttet" id="select_Afsluttet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Afsluttet</option>
<option value="">Ja</option>
<option value="">Nej</option>
<option value="">Alle</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Godkendt" id="select_Godkendt" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Godkendt</option>
<option value="">Ja</option>
<option value="">Nej</option>
<option value="">Alle</option>
</select>
</div>
<div class="form-group form-group-custom flex-item">
<button type="button" class="btn btn-success btn-sm" style="margin-right: 15px;">Søg</button>
<button type="button" class="btn btn-primary btn-sm advanced-search-button" onclick="advancedSearch(this)">Avanceret søgning</button>
</div>
</form>
<form action="" class="form-inline form-custom advanced-search">
<div class="form-group form-group-custom">
<select name="select_Prioritet" id="select_Prioritet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Prioritet</option>
<option value="">Lav</option>
<option value="">Middel</option>
<option value="">Høj</option>
<option value="">Straks</option>
<option value="">Driftfejl</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Opgavestatus" id="select_Opgavestatus" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Opgavestatus</option>
<option value="">Arkiveret</option>
<option value="">Sendt til DUC</option>
<option value="">Venter på bruger</option>
<option value="">Venter på kunde</option>
<option value="">Venter på AO</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Opgavetype" id="select_Opgavetype" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Opgavetype</option>
<option value="">Andet</option>
<option value="">Sendt til DUC</option>
<option value="">Venter på bruger</option>
<option value="">Venter på kunde</option>
<option value="">Venter på AO</option>
</select>
</div>
<div class="form-group form-group-custom">
<select name="select_Underkategori" id="select_Underkategori" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option selected hidden value="">Underkategori</option>
<option value="">Via telefon</option>
<option value="">Via email</option>
<option value="">Internet</option>
<option value="">Intranet</option>
<option value="">VMS</option>
</select>
</div>
<div class="form-group form-group-custom">
<input type="text" class="form-control" placeholder="Søg efter">
</div>
</form>
</div>
<div class="box-content">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Dato</th>
<th scope="col">ID</th>
<th scope="col">Rekv</th>
<th scope="col">Tildelt</th>
<th scope="col">Beskrivelse</th>
<th scope="col">Type</th>
<th scope="col">Seneste log besked</th>
<th scope="col">Deadline</th>
</tr>
</thead>
<tbody>
<tr>
<td>22-11-2017</td>
<td>70935</td>
<td>HJR</td>
<td>LUC</td>
<td>Docking Station...</td>
<td>Bestilling - Via Telefon</td>
<td>8 dage</td>
<td>22-11-2017</td>
</tr>
<tr>
<td>28-11-2017</td>
<td>71049</td>
<td>LLJ</td>
<td>LUC</td>
<td>Kan ikke scanne fra sin printe....</td>
<td>IT-Drift - Via Telefon</td>
<td>3 dage</td>
<td>28-11-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
<tr>
<td>05-12-2017</td>
<td>71244</td>
<td>LYL</td>
<td>LUC</td>
<td>Printer med gul baggrund på hy....</td>
<td>IT-support - Via Telefon</td>
<td>1 dage</td>
<td>05-12-2017</td>
</tr>
</tbody>
</table>
</div>
</div>
我已经通过添加两个额外的类（.flex-container＆amp; .flex-item）并使用适当的值应用某些 flex 属性来实现它。
我将.flex-container类应用于form元素，该元素是所有.form-group / .form-group-custom div的父级，.flex-item类是button s的父级。
答案 1 :(得分：0)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="box-form w-100">
<form action="" class="">
<div class="form-group col-sm-9 d-inline-block form-group-custom float-left">
<button type="button" class="btn btn-success float-left btn-sm" style="margin-right: 15px;">Søg</button>
<button type="button" class="btn btn-primary float-right btn-sm advanced-search-button" onclick="advancedSearch(this)">Avanceret søgning</button>
</div>
</form>
</div>
删除了课程form-inline表单，并为表单中的第一个w-100添加了div。
答案 2 :(得分：0)
你也可以使用左上角的CSS属性。以像素为单位设置值。并且按钮的位置属性值应为绝对值。它对我有用。