CSS: выравнивание элемента поиска по правому краю (Bootstrap)

Question

У меня проблемы с поиском правильного кода для выравнивания моего элемента div справа от страницы.

Теперь у меня есть это:

Я хочу иметь это:

Вот мой код:

<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>

<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i>&nbsp;&nbsp;Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline">
  <div class="float-right">
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </div>
</form>

2 кнопки (желтая и серая) не имеют ничего общего с формой. Форма - это функция поиска моей страницы. Я использую бутстрап для стайлинга.

Answer 1

Если вы используете bootstrap 4, вы можете сделать что-то вроде этого.оберните свои кнопки и форму в один div и дайте ему класс d-flex и ml-auto класс, чтобы сформировать тег

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>

<div class="d-flex">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i>&nbsp;&nbsp;Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline ml-auto">
  <div>
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </div>
</form>
<div>

Answer 2

Я решил вашу проблему, пожалуйста, проверьте следующий код

<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="clearfix">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i>&nbsp;&nbsp;Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline float-right">
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </div>
</form>
</div>

Answer 3

добавить класс к вашему входному тегу, например search-input

тогда в вашем файле CSS

.search-input {
    float: right
}