1ページのサイト - レスポンシブバージョンで画像がオーバーフローする

Question

1ページのサイトをまとめましたが、トップセクションに問題があります。

これは、デスクトップ上では問題ありませんが、他のデバイスでは、セクションスタックの3つの主要な写真が表示されます。このセクションを拡大する代わりに、イメージはオーバーフローします（オーバーフロー隠しプロパティを使用すると非表示になります）。

この問題の原因はわかりませんし、ご指導に感謝します。ここで

は、HTMLです：

<!-- Jumbotron --> 
<section class="jumbotron" id="header"> 
    <div class="container"> 
     <div class="main-photo" id="header-photo"> 

     </div> 

     <div class="transparent-box" style="padding-top: 3%;"> 
      <img src="images/logo.png" style="width: 100%;"></img> 
     </div> 
     <div class="row"> 
      <div class="col-md-10 col-md-offset-1" style="padding-top:5%"> 
       <div class="row"> 
        <div class="col-md-3 col-sm-offset-1"> 
         <figure class="round-outline"> 
          <img class="round-photo img-responsive" src="assets/photo1-sm.jpg" alt=""> 
           <div class="round-caption-bg"></div> 
         </figure> 
        </div> 
        <div class="col-md-3"> 
         <figure class="round-outline"> 
          <img class="round-photo img-responsive" src="assets/photo2-sm.jpg" alt=""> 
           <div class="round-caption-bg"></div> 
         </figure> 
        </div> 
        <div class="col-md-3"> 
         <figure class="round-outline"> 
          <img class="round-photo img-responsive" src="assets/photo3-sm.jpg" alt=""> 
           <div class="round-caption-bg"></div> 
         </figure> 
        </div> 
       </div> 
       <div class="row"> 


        <a href="#quote-one" style="color: #d5b17c;"> 
         <i class="fa fa-chevron-down fa-2x pulsate-opacity chevron"></i> 
        </a> 

       </div> 
      </div> 
     </div> 
    </div> 
</section> 
<!-- End of Jumbotron --> 

とCSS：

/* ========================================================================== 
Jumbotron Section 
========================================================================== */ 

.jumbotron { 
    padding: 100px 0 60px; 
    margin-top: 0; 
    margin-bottom: 0; 
    background: transparent url('../images/black-red-background.jpg') no-repeat top center; 
    background-size: auto auto; 
    background-attachment: fixed; 
    font-size: 1em; 
    height: auto; 
    overflow: hidden; 
} 
.jumbotron .container { 
    text-align: center; 
} 

Answer 1

私が正しく理解している場合、問題は、あなたのcol-mdクラスは、錠剤低いMDサイズにブレークポイントを引き起こすことです。

変更<div class="col-md-3 col-sm-offset-1">も

そして、他の2 <div class="col-md-3"

<div class="col-xs-4">から <div class="col-xs-4">

に何をしたいということですか？