Question

我在Bootstrap v3中使用tab-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')
})

或者，您只需在元素上指定data-toggle="tab"或data-toggle="pill"即可激活制表符或精选导航而无需编写任何JavaScript。

另外，查看代码时，您缺少Bootstrap docs示例中定义的一些属性：

关于主要的ul：<ul class="nav nav-tabs" role="tablist">
在各个标签列表元素上：<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

更改并包含上述内容后，Bootply似乎更改了标签而没有任何奇怪的图像尺寸问题，但是我不确定是否包含有问题的图像。如果没有包含，请更新Bootply，我可以再看看。

Bootply：http://www.bootply.com/eYaZAWwPdJ

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

希望有所帮助！

bootstrap选项卡使用宽图像更改大小

1 个答案: