bootstrap-4 - 拉/ float 权利在 Bootstrap 4 中不起作用

Question

我有一个有角度的应用程序，我正在使用 Bootstrap 和有角度的 Material 来设计它。我想为应用程序创建一个标题，标题中有 2 个按钮，一个在左侧，另一个在右侧。

这是我的组件

<mat-toolbar>
  <mat-toolbar-row>
    <button mat-raised-button>
      <fa name="cog"></fa>
    </button>
    <button mat-raised-button class="float-right">
      <fa name="refresh"></fa>
    </button>
  </mat-toolbar-row>
</mat-toolbar>

注意:我都试过了 pull-right和 float-right .

添加引导我安装引导模块并将其添加到 style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "../node_modules/bootstrap/dist/css/bootstrap.css";

此外，我在我的应用程序中添加了 ng-bootsrap 模块并将其导入
在我的应用组件中

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatButtonModule,
    AngularFontAwesomeModule,
    MatToolbarModule,
    NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

但是似乎没有任何效果，并且正确地拉动我的按钮，有什么想法吗？

Answer 1

Bootstrap-4已删除 pull-*类。

Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right. - Booststrap

有几种方法可以对齐右侧的最后一个按钮。

使用d-flex和 justify-content-between按钮容器上的类。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="d-flex justify-content-between">
  <button class="btn btn-primary">
      Cog
    </button>
  <button class="btn btn-primary">
      Refresh
    </button>
</div>

使用ml-auto在最后一个按钮上。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="d-flex ">
  <button class="btn btn-primary">
      Cog
    </button>
  <button class=" btn btn-primary ml-auto">
      Refresh
    </button>
</div>

使用float-right在最后 button .但它只有在其父级不是 flex 时才有效。并且有足够的空间。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<button class="btn btn-primary">
 Cog
</button>
<button class=" btn btn-primary float-right">
  Refresh
</button>
 

更新

检查此 pen - codepen 中的代码.