Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

bootstrap 4 - How can I align input-group-append elements to the right?

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

That produces this:

enter image description here

I want to align highlighted elements on the right, and keep on same line the text "Lotti".

Thank you very much

question from:https://stackoverflow.com/questions/65671978/how-can-i-align-input-group-append-elements-to-the-right

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

you can use the d-flex function from bootstrap like this:

<div class="input-group d-flex justify-content-end">
        <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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...