响应标签布局可能吗？

Question

是否可以进行此布局，您将如何进行？ 容器有一个边框，而不是在标签的顶部。此处仅选定的选项卡具有顶部边框。选项卡的文本应居中，左对齐也可以。但是第一个标签的文字不能在图像之前开始（左边应该有相同的空格）。

目前html看起来像这样，但如果需要可以更改：

<section class="grid-100 grid-parent tabs">
    <header>
        <ul>
            <li class="selected">Tab1</li>
            <li>Tab2</li>
            <li>Tab3</li>
        </ul>
    </header>
    <article class="tab visible">content</article>
    <article class="tab">content</article>
    <article class="tab">content</article>
    </article>
</section>

Answer 1

这种布局是可行的，但如上所述，您需要发布CSS。

查看Twitter Bootstrap，它允许您将选项卡式内容放在响应式框架中。

你需要添加一些JS才能让它运行，你可以通过添加“bootstrap.min.js”或者只是自己添加标签脚本来实现。这是标签JS文档http://getbootstrap.com/2.3.2/javascript.html#tabs

的直接链接

Answer 2

您的结构可用于任何标签界面或手风琴。请提供您的标签的CSS。您可以在本文中提及引导选项卡。有一些其他选项卡式解决方案，如基础选项卡和jQuery ui选项卡。如果您正在寻找高级响应式选项卡式解决方案，请查看zozo选项卡，其中包含大量示例。

http://zozoui.com/tabs

欢呼声

FariDesign