Bootstrap水平可滚动标签栏

Question

我正在使用标签栏在Bootstrap 3中创建一个应用程序.我正在动态添加和删除标签.这一切都很好,我想做的是,如果有太多的标签适合应用程序的宽度而不是创建多个行或标签,则标签栏可以通过标签水平滚动.

有没有人这样做或有想法如何实现这一点？

Answer 1

这是一个例子:

(由于某种原因不在片段中工作,所以这里有一个指向Bootply的链接:http://www.bootply.com/oROUAMwsG1)

.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -moz-box;
}
.nav-tabs>li {
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-md-4">
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 3</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 4</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 5</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 6</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 7</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>I'm in Section 2.</p>
        </div>
      </div>
    </div>
  </div>
</div>