javascript - 如果将响应图像添加到选项卡式导航菜单中的列，如何限制列宽不扩大

Question

我使用 Zozo 选项卡 - http://zozoui.com/tabs/#templates - 使用 Bootstrap 3。

我的页面中有几个选项卡。

在我的一个选项卡中，我使用 Bootstrap 创建了 2 个列并放置了一个 img 响应图像。

但是，当我将图像放入选项卡时，我意识到行的宽度变大了。

当我切换到其他没有图像的选项卡时，行为相同。

即使且仅当我在列中有图像时问题仍然存在

这是我的代码

<div class="row">
    <div class="col-md-7">
        <div class="row">
            <div class="col-md-12">
                Left
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="row">
            <div class="col-md-12">
                <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
            </div>
            <div class="col-md-12">
                <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
            </div>
            <div class="col-md-12">
                <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
            </div>
        </div>

    </div>
</div>

这是我的演示

http://jsfiddle.net/r8rFc/298/

这是我的演示。只需查看第一个选项卡，然后查看其他选项卡。

请关注第一个选项卡，当我切换到其他选项卡时。

请在下面找到更详细的视频。

https://www.dropbox.com/s/f0p0v5idzzb3wl4/first_tab_problem.mov?dl=0

Answer 1

行没有扩大。滚动条只出现在第一个选项卡上，因为图像超出了窗口的垂直空间。您可以随时在页面上显示滚动条，以防止轻微的跳跃/抽动，方法是添加:

html {
    overflow-y: scroll;
}

在开发人员工具中测试并确认它有效。