拉/浮动右在Bootstrap 4中不起作用

Question

我有一个有角度的应用程序，我正在使用引导程序和有角度的材料来设计它。我想为应用创建标题，并且标题中有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-*类。

为响应浮动添加了.float- {sm，md，lg，xl}-{left，right，none}类，并删除了.pull-left和.pull-right，因为它们对.float-left和.float-是多余的对。- 助推器

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

1. 按钮容器的用法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>

2. 使用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>

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

更新资料

检查此笔式手写笔中的代码。