CSS：如何将面板稍微远离页面

问题描述

我在像这样稍微移动页面的面板时遇到问题：

enter image description here

我试过width: 120%

它确实有效，但是当我调整图像的大小时，它会移出其原始位置，我希望它在不同的屏幕上看起来相似，面板位于 bootstrap 4 容器内，因为我使用的是 bootstrap 4

请帮忙，谢谢

解决方法

没有看到任何代码来尝试重现我们最后的问题，我假设您需要根据视口设置 margin-left 的宽度。这意味着对于不同的视口，您需要相应地调整边距。

根据设备大小检查这一点。

/* For devices smaller than 400px: */
body {
  left-margin: 100%;
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body {
    left-margin: 50%;
  }
} 

查看 W3 关于响应式网页设计的信息系列。 https://www.w3schools.com/css/css_rwd_intro.asp

,

这是一支可能对您有所帮助的快速笔。 Codepen Link 如果您创建一支笔或分享您的代码，我会为您寻找我的想法，只是一个粗略的想法，但可能会对您有所帮助。

如果您想将图像移出屏幕右侧，请使用 margin-right: -???px，但请确保包装上有 overflow: hidden。