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

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

垂直滚动条将内容推送过来，创建水平滚动条

1 个答案: