如何在标签增长时实现水平滚动条

Question

我需要实现导航标签。当标签超出限制时，我需要提供horizontal滚动条。

我的参考代码：

http://code.ciphertrick.com/2015/05/04/browser-like-tabs-with-angularjs-and-bootstrap/

我在上面的网址中实现了相同的功能。但是当标签长度超过宽度时，我需要一个水平滚动条。目前，它将在另一行中出现。

请帮忙。

Answer 1

编辑你的ul并添加两个样式

  display:flex;
  white-space: nowrap;

<ul class="nav nav-tabs" role="tablist" style="display:flex;white-space: nowrap;">

Answer 2

您必须使用固定宽度并设置css属性溢出水平滚动。

.nav {
    overflow-x: scroll;
    width: 1500px;
}