Question

我正在使用反应引导选项卡，我想只在一行中显示它们，如sublime或atom，但问题是当它们到达容器的宽度时它们会自动断行。任何人都知道如何做到这一点。非常感谢！下面是我的代码，只使用反应引导程序的简单选项卡

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，在该类中进行更改。将此样式放在head html文件中，它将起作用：

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

Answer 2

设置每个标签的宽度，减小字体大小，例如两个标签设置每个点击 50% 的宽度并保持缩小。

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

2 个答案: