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

【问题标题】：How to set padding but keep the element responsive?如何设置填充但保持元素响应？
【发布时间】：2023-03-06 00:48:01
【问题描述】：

我想在一个元素上设置填充，但是当我调整窗口大小时，我清楚地看到这个元素不再响应。我将 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>

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

【问题讨论】：

标签： html reactjs responsive-design padding react-bootstrap

【解决方案1】：

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

例子

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

【讨论】：

这也是一个很好的输入，我也会在其他一些元素上使用它。谢谢