语义UI选项卡未样式化

Question

我严格按照语义UI页面http://www.semantic-ui.com/modules/tab.html#/usage上的说明使用，并将tab.min.css文件放入我的CSS文件夹中，并正确链接了它。但是，当我运行页面时，它看起来与语义UI的外观完全不同。相反，它看起来像这样的垂直文本和纯文本：

标签1标签2标签3

这是我现在在页面上需要使用选项卡的代码。

<script>$('.tabular.menu .item').tab();
</script>

<div class="ui tabular menu" >
  <div class="item active" data-tab="ts-tab1">Tab 1</div>
  <div class="item" data-tab="ts-tab2">Tab 2</div>
  <div class="item" data-tab="ts-tab3">Tab 3</div>
  <div class="item" data-tab="ts-tab4">Tab 4</div>
  <div class="item" data-tab="ts-tab5">Tab 5</div>
  <div class="item" data-tab="ts-tab6">Tab 6</div>
</div>

<div class="ui tab active" data-tab="ts-tab1">
 example content
</div>

<div class="ui tab" data-tab="ts-tab2">
  example content

</div>
<div class="ui tab" data-tab="ts-tab3">
 example content

</div>
<div class="ui tab" data-tab="ts-tab4">
 example content

</div>
<div class="ui tab" data-tab="ts-tab5">
 example content

</div>
<div class="ui tab" data-tab="ts-tab6">
 example content

</div>

我想念的是什么？我很沮丧，因为我现在已经想把它弄乱了一天。

Answer 1

我在React中实现Tab时研究同一问题时偶然发现了这一点。对我来说，问题是tab.min.css文件不包含与菜单相关的样式，这些样式用于表格菜单。将相关的菜单类添加到CSS中可以解决此问题。