ブラウザーがブートストラップでサイズを変更したときに、divコンテンツの内部でオーバーフローを隠す

Question

私はすべてのSOの質問を読んでgoogleをしましたが、答えることはできません。私はブートストラップのレイアウトを持っており、ブラウザが両サイド（左右）から隠すようにコンテンツのサイズを変更する必要があります。私は否定的に余裕を与えた場合、私はそれは右のみ

から隠されています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% 
} 

私は、小さな画面上の問題がある可能性があり、だと思います。しかし、あなたはそれを行う方法の例と、メディアクエリによってターゲット設定できるいくつかの特定の画面を持っています。