Question

我在我的应用程序中使用jQuery选项卡插件，并面临一些调整大小的问题。这是html -

<div class="container-fluid" id="view">
    <ul>
        <li>
            <a href="#t1">Tab 1</a>
        </li>
        <li>
            <a href="#t2">Tab 2</a>
        </li>
        <li>
            <a href="#t3">Tab 3</a>
        </li>
        <li>
            <a href="#t4">Tab 4</a>
        </li>
    </ul>

    <div class="container" id="t1">Content A
    </div>
    <div class="container" id="t2">Content B
    </div>
    <div class="container" id="t3">Content C
    </div>
    <div class="container" id="t4">Content D
    </div>
</div>

当我在完整窗口中查看此页面时，它已正确显示，但当我将窗口调整为较小宽度时，div控件显示在选项卡下方而不是它们旁边。如您所见，由于大小已经不如JSFiddle窗口，因此内容显示在底部。我希望它与标签菜单一起正确调整大小。

是的，我可以将宽度缩小到10％，但我希望它是100％开始然后自动调整大小。我该如何解决这个问题？

This是JSFiddle链接。

Answer 1

因为这个问题是在bootstrap下;一个起点是使用像this fiddle

这样的bootstrap响应网格系统

<ul class="col-md-x">....
<div class=" col-md-x" id="t1">...

然后决定你想要它的浏览器窗口，即使它在480px，并使用grid options media query来定制你的CSS。

Answer 2

这种情况正在发生，因为您的＆＃34;标签＆＃34;容器是8em宽（绝对大小）和你的＆＃34;内容＆＃34;容器宽90％（相对尺寸）。当窗口是全屏时，为标签留下的屏幕的10％是> 8em，因此标签适合内容的左侧。当窗口较小时，10％是＆lt; 8em，因此内容div低于标签，因为它没有空间。

最简单的解决方案是使内容容器成为静态宽度并将其向左浮动。鉴于.tabs（）插件的工作原理，您不能为内容容器提供相对宽度，而选项卡容器则为静态容器。它们必须是一种类型或另一种类型。

另一个选项是给标签容器一个相对宽度以占用剩余空间（在这种情况下为10％）。

在调整大小窗口的底部显示JQuery选项卡内容

2 个答案: