引导标签 - 与水平滚动

Question

力inline-block的显示我已经检查：

• Display inline-block image link with horizontal scroll
• Bootstrap row with horizontal scroll

但他们两人并没有真正解决我的问题。

我做了什么：

我使用的是免费的自举模板（SB-管理2，它可以在这里找到：http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html），更确切地说，我实际工作的“聊天”面板。

原来聊天布局：

我试图做到的是将下面的“聊天”文本“用户列表”，并完成这样的我已经取得了全服务器逻辑，为了能够显示/隐藏聊天，我使用bootstrap的标签：http://getbootstrap.com/javascript/#tabs（因为它更容易控制整个聊天流程）。

为了不发布整个项目的全部源代码（超过10万行代码），我已经复制了我的问题，在一个小提琴上发布它。

相关部分我所做的测试是这一个（它包含一些树枝，我礼貌地要求你忽略它，它不会在标签中，因为我没有任何与树枝的问题）：

<div class="panel-body"> 
     <div class="span11"> 
      <div class="row-fluid"> 
       <div class="col-lg-12"> 
        <ul class="nav nav-tabs" role="tablist"> 
         <li role="presentation" class="active"> 
          <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span> 
          </a> 
         </li> 
         <li role="presentation" class="active"> 
          <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span> 
          </a> 
         </li> 
         <li role="presentation" class="active"> 
          <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span> 
          </a> 
         </li><li role="presentation" class="active"> 
          <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span> 
          </a> 
         </li> 
         <li role="presentation" class="active"> 
          <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span> 
          </a> 
         </li> 
         <li role="presentation" class="active"> 
          <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span> 
          </a> 
         </li> 
         <li role="presentation" class="active"> 
          <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span> 
          </a> 
         </li> 
         <li role="presentation" class="active"> 
          <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span> 
          </a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 

这是我阅读完所有的职位对能够我做了什么水平滚动一组元素，因此后尝试是：

• 创建一个容器（span11）
• 创建一个流体排（行流体）
• 创建COL-LG-12元件（填补行）
• 解析它里面整个集合中元素的（所有<ul> <li>，所有突片）。

我期待在和与它里面的元素的滚动条用100％的宽度一个div，像这样： http://jsfiddle.net/zLez4drz/ （警告：从另一个问题，我拿了信息摘自小提琴）

虽然我的输出是这个，而不是：

< - 通过设置高50像素

< - 通过设置高度100像素

概括地说，正在根据设备（或分辨率）打印在两个（或多个）行中的元素，而我希望他们全部打印在内并且能够水平滚动，而不管父容器内的<li>s的数量。

小提琴上下工夫：

http://jsfiddle.net/b7ghL587/1/

我的问题：

1. 为什么会发生？有什么办法来解决它，或者我应该不使用列表，并重写javascript部分？
2. DOM的其他部分可以影响它吗？

Answer 1

您无法滚动浮动的元素。
你需要重写一些引导默认代码：

.nav-tabs > li { 
    float:none; 
    display:inline-block; 
} 

Here是工作提琴。