bootstrap-4 - 如何将 input-group-append 元素向右对齐？

Question

<div class="col-lg-5 col-md-6 col-sm-6" style="background-color: transparent">
    <div class="input-group">
        <text class="font-weight-bold float-left" >Lotti</text>    

        <div class="input-group-append float-right">
            <input type="text" class="m-0 form-control form-control-sm" style="max-width: 150px;height:25px" @bind="testoRicerca" @bind:event="oninput" @onkeypress="CercaLotto" />
            <button class="border-0 bg-filter m-0" title="Cerca lotto" @onclick="TrovaLotto"><i class="fas fa-search fa-lg"></i></button>
            <button class="@buttonPoszioniLottoClass" title="Posizioni lotto" @onclick="ShowPosizioniLotto"><i class="fas fa-crosshairs fa-lg"></i></button>
            <button class="border-0 bg-transparent m-0" title="Note di entrata lotto" @onclick="ShowNoteEntrataLotto"><i class="far fa-clipboard fa-lg"></i></button>
        </div>
    </div>

这产生了这个：

我想在右侧对齐突出显示的元素，并将文本“Lotti”保持在同一行。

非常感谢

标签： bootstrap-4

Answer 1

谢谢我解决了这个问题：

    <div class="col-lg-5 col-md-6 col-sm-6" style="background-color: transparent">
        <div class="input-group">
            <text class="font-weight-bold mr-auto">Lotti</text>

            <div class="input-group-append">
                <input type="text" class="m-0 form-control form-control-sm" style="width:120px;height:25px" @bind="testoRicerca" @bind:event="oninput" @onkeypress="CercaLotto" />
                <button class="border-0 bg-filter m-0" title="Cerca lotto" @onclick="TrovaLotto"><i class="fas fa-search fa-lg"></i></button>
                <button class="@buttonPoszioniLottoClass" title="Posizioni lotto" @onclick="ShowPosizioniLotto"><i class="fas fa-crosshairs fa-lg"></i></button>
                <button class="border-0 bg-transparent m-0" title="Note di entrata lotto" @onclick="ShowNoteEntrataLotto"><i class="far fa-clipboard fa-lg"></i></button>
            </div>
        </div>