Bootstrap框架下iframe响应式问题求助

Hey there, I’ve dealt with this exact problem before! The root cause here is that your iframe has fixed width and height attributes — these don’t automatically shrink to fit the parent container when the screen width drops below 768px, which causes the overflow issue.

Bootstrap provides a dedicated responsive embed component to fix this. Here’s how to adjust your code:

Option 1: Match your iframe’s exact original ratio #

Your iframe has a width of 458px and height of 488px, so we’ll calculate the exact aspect ratio to maintain its original proportions:

<div class="row">
  <div class="col-md-12">
    <div class="text-center">
      <!-- Custom responsive container matching your iframe's ratio -->
      <div class="embed-responsive" style="padding-top: 106.55%;">
        <iframe class="embed-responsive-item" 
                src="http://www.emanueleferonato.com/wp-content/uploads/2015/07/wheel/" 
                frameborder="0" 
                scrolling="no"></iframe>
      </div>
    </div>
  </div>
</div>

• The embed-responsive class sets up the container to handle responsive scaling
• padding-top: 106.55% is calculated as (488 / 458) * 100% — this maintains your iframe’s original width-to-height ratio
• embed-responsive-item forces the iframe to fill the entire container and scale with it
• We removed the fixed width and height attributes to let the container control sizing

Option 2: Use Bootstrap’s predefined ratio (simpler, approximate) #

If you don’t need pixel-perfect ratio matching, Bootstrap has pre-built ratio classes. Since your iframe is close to a 1:1 square, you can use embed-responsive-1x1:

<div class="row">
  <div class="col-md-12">
    <div class="text-center">
      <div class="embed-responsive embed-responsive-1x1">
        <iframe class="embed-responsive-item" 
                src="http://www.emanueleferonato.com/wp-content/uploads/2015/07/wheel/" 
                frameborder="0" 
                scrolling="no"></iframe>
      </div>
    </div>
  </div>
</div>

Either way, after making this change, your iframe will automatically scale down to fit screens smaller than 768px without overflowing the viewport.

内容的提问来源于stack exchange，提问作者rakeshkumar