html - 当浏览器在 Bootstrap 中调整大小时，隐藏左侧 div 内容中的溢出

Question

我已经阅读了所有 SO 问题并进行了谷歌搜索但无法回答。我有一个 Bootstrap 布局，我需要在浏览器调整内容大小时从两侧(左侧和右侧)隐藏。

• 如果我使用 overflow-x:hidden 那么它只会从右侧隐藏

• 如果我给负边距那么布局就会出错

如您在代码中所见。当浏览器仅调整右侧图像大小时隐藏。但我需要从双方隐藏该页面。我只需要 CSS 解决方案。

body {
   overflow-x:hidden;
}
.wrapper {
  width: 1170px;
  margin: 0 auto 0 -585px;
  position:relative; 
  left:50%
}
.left-img {
  width: 600px;
  height: 700px;
 }
.right-img {
  width: 700px;
  height: 600px;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="wrapper">
  <div class="col-xs-6">
    <img src="http://www.w3schools.com/w3images/lights.jpg" class="img-responsive left-img">
  </div>
  
  <div class="col-xs-6">
    <img src="http://www.w3schools.com/w3images/lights.jpg" class="img-responsive right-img">
   </div>

</div><!-- end wrapper-->

Answer 1

将它添加到您的包装器中，它将起作用。我不知道这是否是最佳解决方案，但它确实有效，因为它必须溢出左侧屏幕，必须将边距设置为负数(包装宽度的一半)。

Live example

.wrapper {
   width:1270px;
   margin:0 auto 0 -635px; 
   position:relative; 
   left:50% 
}

我认为，在小屏幕上可能会有问题。但是您有一个如何执行此操作的示例，以及您可以通过媒体查询定位的一些特定屏幕。