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

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

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

然后在你想要的浏览器窗口中决定你想要它到底部，即使它在 480px 并使用 grid options media query自定义您的 CSS。