如何动态调整导航选项卡的宽度，使其充满屏幕

Question

我有一个如下所示的导航标签：

我正在使用椭圆形，但是我不喜欢我的导航如何分散在第二行中。我不想使用nav-justfied而是可以挤压

以便它适合屏幕显示，而用户不必水平滚动。

如下所示

到目前为止我的代码

.nav-tabs>li:not(.active)>a {
  background-color: white;
  border: 1px solid #ddd;
  border-bottom: none;
  border-top: 3px solid #9d9d9d;
  text-overflow: ellipsis;
  max-width: 10em;
  overflow: hidden;
  display: block;
}

.nav-tabs {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  white-space: nowrap;
}

<ul class="nav nav-tabs">

  <div class="btn-toolbar pull-right">
    {% block tab_buttons %}
    {% endblock %}
  </div>

  <li role="presentation" class="{% if '/hosts' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:events:hosts-list' event.id %}" role="tab">Hosts</a></li>
  {% for tab in event.benchmarks.all %}
  <li role="presentation" class="{% if 'summary' in request.path and tab == benchmark %}active {% endif %}inverse"><a href="{% url 'sc:events:benchmarks-summary' event.id tab.id %}" role="tab">{{ tab.name }}</a></li>
  {% endfor %}
</ul>

Answer 1

我不确定您要问什么，但听起来您可以从使用中受益：

display flex在您的导航上。

如果您要在同一页面（例如管理面板）上加载内容，则强烈建议Jquery Tabs。

Answer 2

在标签上使用Display:inline-flex; css属性。