修复bootstrap导航栏溢出

Question

我将动态填充导航栏，项目数量会不时变化。

当项目超过基本容器的宽度时，导航栏会分为两行。当发生这种情况时，我希望导航栏的呈现方式类似于我在下面添加的图像。

这是Firefox标题栏的屏幕截图，其中箭头位于最左侧和最右侧，但我希望它们一起显示在导航栏的右端。

我在其他地方搜索过类似的实现，但却找不到。

代码段：

＆＃13;

＆＃13;

.nav-tabs > li > a {
  background: #dbeef9;
  border: 1px solid #add2e6;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs DefaultTab" id="main-tabs" role="tablist">
  <li class="">
    <a href="#" role="tab" data-toggle="tab" id="li-menu-1">
      <span class="pull-left tick"></span>Item1
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item2
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item3
    </a>
  </li>
  <li class="active">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item4
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item5
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item6
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item7
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item8
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item9
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item10
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item11
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item12
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item12
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item12
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item12
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item12
    </a>
  </li>
  <li class="">
    <a href="#" role="tab" data-toggle="tab">
      <span class="pull-left tick"></span>Item12
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

`

Answer 1

我的方式是使用滚动，但我认为你可以从这个examples

开始

如果您想使用鼠标拖动滚动，可以搜索dragscroll params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); this.setScaleX(2); this.setScaleY(2); params.addRule(RelativeLayout.BELOW,R.id.updateButton); params.bottomMargin = updateButton.getLayoutParams().width*2;