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

Question

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

enter image description here

我试过了width: 120%

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

请帮忙，谢谢

Answer 1

没有看到任何代码来尝试在我们这边重现问题，我假设您需要根据视口设置 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

Answer 2

这里有一支速写笔，可能会对您有所帮助。 Codepen Link 如果您创建笔或分享您的代码，我会帮您看看我的粗略想法，但可能会对您有所帮助。

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

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

CSS: How to position a panel slightly off the page

html

css

bootstrap-4

bootstrap-grid