Bootstrap环境下实现搜索div元素页面右对齐的问题

嘿，我看你在Bootstrap里折腾搜索表单右对齐的事儿，咱们来快速搞定它！

问题根源 #

你给表单加了form-check-inline类，但这个类是专门给复选框/单选按钮组用的，它会把表单变成行内块级元素，导致里面的float-right没法正常发挥作用——浮动需要父元素有完整的块级空间才行。

解决方案：用Bootstrap Flex布局替代浮动 #

Bootstrap的flex布局类比浮动更稳定，也更符合现代响应式设计的思路，直接给表单加上d-flex justify-content-end就能实现右对齐：

<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="d-flex justify-content-end">
  <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>

进阶优化：让按钮和搜索表单同行对齐 #

如果想让左侧的按钮和右侧的搜索表单在同一行垂直居中，只需把它们放进一个flex容器里：

<div class="d-flex justify-content-between align-items-center mb-3">
  <div>
    <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>
  </div>
  <form name="searchForm" (submit)="search()">
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </form>
</div>
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>

这样左边按钮组、右边搜索表单会自动占满行宽，且垂直居中，视觉效果更协调。

内容的提问来源于stack exchange，提问作者Ian Martens