css - 如何在 React js 中将引导模型放置在屏幕的右下方？

Question

我正在使用内联 CSS 将模型放置在屏幕的右下方，但它无法正常工作

<div className="modal fade " style={{ width:'30%',position:'fixed',bottom:0,right:0,margin:0}} id="updateCategory" tabIndex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true" >

它给了我以下输出

即使删除上面的所有 css 属性，除了width:'30%'结果是相同的。

但是如果我使用以下样式，它会起作用

<div className="modal fade " style={{ width:'30%',bottom: 0,marginTop:260,marginLeft:900}} id="updateCategory" tabIndex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true" >

但我想使用底部 0 和右侧 0 。这些将如何工作。请帮忙

标签： cssreactjs

Answer 1

试试看：

margin-left: auto;
margin-right: 0;
margin-top: auto;
margin-bottom: 0;
top: 100%;
transform: translateY(-100%);