如何设置填充但保持元素响应？

Question

我想在一个元素上设置填充，但是当我调整 window 大小时，我清楚地看到这个元素不再响应。我将 Reactjs 与 React-bootstrap 一起使用，它来自我在元素上设置填充的方式，因为如果我删除它，它就会响应。

<div style={{padding: '50px 300px 100px 300px'}} className="col-md-12 offset-md-12 card">
   <p style={{textAlignVertical: "center", textAlign: "center", fontSize: 22, color: "green"}}>File processed with success</p>
   <a href="/" className="button" style={{textAlignVertical: "center", textAlign: "center", fontSize: 16, color: "blue"}}>Go back home</a>
</div>

如何设置填充并保持元素响应？

Answer 1

使用百分比作为度量单位。百分比将根据屏幕上的特定百分比设置区域，而像素将占用屏幕上不会响应的某些特定区域。

示例

 style={{padding: '5% 3% 1% 3%'}}

如何设置填充但保持元素响应？

How to set padding but keep the element responsive?

html

padding

responsive-design

reactjs

react-bootstrap