pull/float right在Bootstrap 4中不起作用
pull/float right在Bootstrap 4中不起作用
提问于 2018-06-03 03:50:23
我有一个angular应用程序，我正在使用bootstrap和angular材质来设计它。我想创建一个标题的应用程序，我有两个按钮在标题，一个在左边，另一个假设是在右边。
这是我的组件
<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]
})然而，似乎没有什么工作，并按我的按钮正确，有什么想法？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-03 04:02:05
Bootstrap-4删除了pull-*类。
为响应式浮点添加了.float-{sm，md，lg，xl}-{left，right，none}类，并删除了.pull-left和.pull-right，因为它们与.float-left和.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>
- 在最后一个
button上使用float-right。但是，只有当它的父级不是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中的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50660604
复制相关文章
相似问题