Question

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

有没有人这样做或者知道如何实现这个？

Answer 1

以下是一个例子：

（由于某种原因不在代码段中工作，所以这里有指向 Bootply 的链接：http://www.bootply.com/oROUAMwsG1）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我使用导航创建了一个可水平滚动的标签栏。

您可以查看以下代码 here 的工作演示。

CSS

ajaxSettings: {
    type: 'GET',
    dataType: 'json'
}

HTML

 .nav {
  overflow-x: auto;
  overflow-y: hidden;
  height: 115px;
}

.nav-item {
  cursor: pointer;
  margin: 15px 10px;
  width: 200px;
  height: 70px;
  box-shadow: 0 4px 6px -6px #222;
}

.nav-link {
  font-size: 14px;
  text-align: center;
}

.nav-item.selected {
  color: #fff;
  background-color: #007bff;
}

Bootstrap水平可滚动标签栏

2 个答案: