我使用 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/
这是我的演示。只需查看第一个选项卡,然后查看其他选项卡。
请关注第一个选项卡,当我切换到其他选项卡时。p>
请在下面找到更详细的视频。
https://www.dropbox.com/s/f0p0v5idzzb3wl4/first_tab_problem.mov?dl=0
最佳答案
行没有扩大。滚动条只出现在第一个选项卡上,因为图像超出了窗口的垂直空间。您可以随时在页面上显示滚动条,以防止轻微的跳跃/抽动,方法是添加:
html {
overflow-y: scroll;
}
在开发人员工具中测试并确认它有效。
关于javascript - 如果将响应图像添加到选项卡式导航菜单中的列,如何限制列宽不扩大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28989174/