使反应引导选项卡仅显示在一行中

Question

我正在使用 react bootstrap 选项卡，我想只在一行中显示它们，例如 sublime 或 atom，但问题是当它们达到容器的宽度时它们会自动换行。 任何人都知道我该怎么做。 非常感谢！ 下面是我的代码，只使用了 react bootstrap 的简单标签

return (
  <div>
    <Tabs>
      {this.props.tabState.map(function(v, i, obj) {
        return (
          <Tab key={i} eventKey={i} title={titleWithBtn(v, i)} >
            {childrenWithProps({file:v, tabIndex:i})}
          </Tab>
        )
      })}
    </Tabs>
  </div>
);

解决方案
我可以通过使用这个npm

完美地做到这一点

Answer 1

检查Tabs 结构，它使用ul 和li 创建选项卡，应用的类是.nav-tabs，在该类中进行更改。将此样式放在html 的head 文件中即可：

<style type="text/css">
   .nav-tabs {
        display: inline-flex !important;
    }
</style>

Answer 2

设置每个选项卡的宽度，减小字体大小，例如两个选项卡将每个点击设置为 50% 宽度并保持缩小。