更新

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。

添加bootstrap我安装了bootstrap模块并将其添加到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右。 - 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中的代码。

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

1 个答案:

更新