JQuery 调整大小时底部显示的标签内容 window

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>

当我完整查看此页面 window 时，它可以正常显示，但是当我将 window 调整为更小的宽度时，div 控件显示在选项卡下方，不在他们旁边。如您所见，由于尺寸已经小于 JSFiddle window，内容显示在底部。我希望它与选项卡菜单一起正确调整大小。

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

This 是 JSFiddle link.

Answer 1

发生这种情况是因为您的 "tabs" 容器宽度为 8em（绝对大小）而您的 "content" 容器宽度为 90%（相对大小）。当 window 是全屏时，选项卡剩余的 10% 屏幕大于 8em，因此选项卡适合内容的左侧。当 window 较小时，10% 小于 8em，因此内容 div 落在选项卡下方，因为没有空间容纳它。

对此最简单的解决方案是将内容容器设置为静态宽度并将其向左浮动。鉴于 .tabs() 插件的工作方式，您不能为内容容器提供相对宽度，而为选项卡容器提供静态宽度。它们必须都是一种类型。

另一种选择是给选项卡容器一个相对宽度，以占用剩余的 space（在本例中为 10%）。

Answer 2

因为这个问题在bootstrap之下；一个起点是使用 bootstrap 响应式网格系统，例如 this fiddle

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

然后决定你的浏览器 window 你想要它到底部，即使它在 480px 并使用 grid options media query 来自定义你的 css.

JQuery 调整大小时底部显示的标签内容 window

JQuery tab content displayed at bottom on resizing window

html

css

jquery

twitter-bootstrap

twitter-bootstrap-3