html - Bootstrap 选项卡使用宽图像更改大小

Question

我使用 Bootstrap v3 中的选项卡 Pane 类制作了一个选项卡式页面。左侧是选项卡菜单，右侧是选项卡内容。这些一起位于页面的中间，然后页面的其余部分是背景。

每当我在标签内容中放置一个比特定尺寸更宽的图像时，它会使该标签比没有那么宽的图像的标签窄一点。因此，当我从一个带有宽图像的选项卡切换到一个没有宽图像的选项卡时，会发生非常明显的宽度变化。有趣的是，所有带有宽图像的选项卡都具有相同的窄一点宽度，所有没有宽图像的选项卡也是如此。

为了说明，这个选项卡

<div class="tab-pane" id="dummy">
    <img src="assets/img/dummy.png">
    <h4>lorem ipsum</h4>
</div><!-- Tab Profile -->

看起来比这个标签窄一些

<div class="tab-pane" id="dummy">
    <h4>lorem ipsum</h4>
</div><!-- Tab Profile -->

此外，我是否使用 class="img-responsive" 也无关紧要。问题还是一样。

我不确定我是否可以充分说明我的观点。因此，如果需要更多信息，请告诉我。

编辑:网站的 bootply 版本: http://www.bootply.com/eYaZAWwPdJ

Answer 1

所以在查看了您的代码之后，正如我上面提到的，我遇到了一些问题。据我所知，它似乎有效，但如果不是这样，请告诉我，我可以再看一下。

一些注意事项

您可以使用多个选择器单独激活选项卡:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

您也可以通过 javascript 一次启动它们:

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

或者，您无需编写任何 JavaScript，只需指定 data-toggle="tab" 即可激活选项卡或药丸导航。或 data-toggle="pill"在一个元素上。

此外，查看您的代码，您遗漏了 Bootstrap 文档示例中定义的一些属性:

1. 在主 ul 上:<ul class="nav nav-tabs" role="tablist">
2. 在单个选项卡列表元素上:<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

在更改并包含上述内容后，Bootply 似乎更改了选项卡而没有任何奇怪的图像大小问题，但是我不确定是否包含有问题的图像。如果没有包含，请更新 Bootply，我可以再看一下。

Bootstrap :http://www.bootply.com/eYaZAWwPdJ

有关 Bootstrap 选项卡的更多信息:http://getbootstrap.com/javascript/#tabs-usage

希望对您有所帮助!