How to put the cancel button on the bottom right?
我正在将此代码用于"取消"按钮。
我如何使取消按钮位于屏幕的右下角。
1 2 3 | <button class ="btn btn-secondary margin-r-10" (click)="close()"> Cancel </button> |
您可以将此CSS添加到按钮
1 2 3 4 5 | button{ position: absolute; right: 10px; bottom: 10px; } |
演示https://stackblitz.com/edit/angular-ivy-rqnqtu
这将适用于任何分辨率,
在按钮中添加更多类别,这是类别
并使用css
1 2 3 4 5 | .rightbottom { position: absolute; right: 10%; bottom: 15%; } |
1 2 3 4 5 | .rightbottom { position: absolute; right: 10%; bottom: 15%; } |
1 2 3 4 5 | <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <button class="btn btn-secondary margin-r-10 rightbottom" (click)="close()"> Cancel </button> |
如果您正在使用引导程序(假设您正在使用引导程序),请尝试以下代码:
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> Button to the right <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <button class ="btn btn-secondary float-right my-2" (click)="close()">Cancel</button> </body> </html> |