右对齐按钮的形式

Question

我在使用float时遇到了一些麻烦：对;在按钮上。

无论我做什么，按钮都不想向右走。 它是第二个按钮，带有＆＃34;高级搜索按钮＆＃34;类。

我正在使用Bootstrap 4。

HTML

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我希望你能帮助我:)。

我没有这个部分的自定义CSS，我只使用JS的类。

Answer 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的父级。

Answer 2

<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。

Answer 3

你也可以使用左上角的CSS属性。以像素为单位设置值。并且按钮的位置属性值应为绝对值。它对我有用。