html - 垂直滚动条推内容，创建水平滚动条

Question

这是我现在正在使用的页面:http://home-dev.mpcleague.com/contact

我正在努力定位正确的图像，使其看起来像是从屏幕的右侧出现。到目前为止看起来不错。

但我注意到，当我插入鼠标时，Safari 和/或 Mac 会检测到我有鼠标并显示垂直滚动条。这很正常，除了图像的一小部分(滚​​动条的宽度)现在显示在屏幕边缘之外，这会创建一个水平滚动条。

与我的图像及其容器相关的 HTML/CSS 如下:

<div class="col-md-6 image-col">
     <div class="image-container">
          <img class="contact-graphic" src="/assets/contact-us-graphic.png" />
     </div>

</div>

.image-container {
    height:70vh;
}
img.contact-graphic {
    height:100%;
    border-radius:5px;
}
.image-col {
    padding-right:0 !important;
    padding-left:0;
    margin-right:0 !important;
    overflow-x:hidden !important;
    width:50vw !important;
    margin-right:-50vw!important;
    display:inline-block;
}

在旁注中，我感觉这个 CSS 可能不是最好的。如果您有任何建议，我很乐意提供帮助。

谢谢!

Answer 1

从 .image-col 中删除 width: 50vw!important;!它是引导网格的一部分。