使填充响应

Question

我刚开始使用 Bootstrap，总体来说我是前端开发的新手。我遇到了填充问题，因为它在桌面和移动设备上保持相同的大小。

HTML 代码：

   <div class="container" id="i-container">
        <h3>We possess high quality products &mdash; therefore our customers are always loyal</h3>
  </div>

CSS 代码：

   #i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 150px
        padding-top: 10px;
    }

正如我上面提到的，在移动设备中，填充保持不变（它似乎没有响应）。顺便说一下，我也尝试过使用 em 。这也无济于事。

原文由 Anon Ymous 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用百分比作为衡量单位，同时使您的网站具有响应性。如果您希望 Pixels 具有响应性，则它不起作用。如果您使用百分比，则将根据屏幕尺寸进行测量。但是，如果您使用像素，则所有尺寸的内边距都保持不变。只需如下所示更改您的 CSS：

 #i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 12%;
        padding-top: 0.5%;
    }

使用您想要的百分比。

原文由 Pragyakar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

CSS 中有一些值用于根据视口（浏览器窗口的大小）调整大小。一个单位是视口轴之一的 1%。这些对于响应式设计很有用，即设计在不同屏幕尺寸下看起来都不错的网站，利用它们可用的空间。

 padding: 1vw // 1% of viewport width
padding: 1vh // 1% of viewport height
padding: 1vmin // 1vw or 1vh, whichever is smaller
padding: 1vmax // 1vw or 1vh, whichever is larger

您还可以使用引导程序中基于网格的布局

原文由 Shuaib Abubakker Bapputty Haji 发布，翻译遵循 CC BY-SA 4.0 许可协议