Bootstrap 标签 - 强制 inline-block 水平滚动显示

Question

我已经检查过：

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

但是他们两个都没有真正解决我的问题。

What I have done:

我正在使用免费的 bootstrap 模板（sb-admin 2，可在此处找到：http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html），更准确地说，我实际上正在使用 "chat"面板。

原来的聊天布局是：

我想要完成的是在 "chat" 文本下面添加一个 "user list"，为了实现这一点，我已经制作了整个服务器逻辑，并且为了能够显示/ 隐藏聊天，我正在使用 bootstrap 的选项卡 : http://getbootstrap.com/javascript/#tabs（因为它更容易控制整个聊天流程）。

为了不 post 整个项目的全部源代码（超过 10 万行代码），我在 fiddle 上复制了我的问题，以便 post它。

我所做的测试的相关部分是这个（它包含一些树枝，我礼貌地请你忽略它，它不会在标签因为我对 twig 没有任何问题):

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

这是我在阅读所有关于能够水平滚动一组元素的 post 之后尝试的方法，因此我所做的是：

创建容器 (span11)
创建流畅的行（row-fluid）
创建一个 col-lg-12 元素（填充行）
在其中解析整个元素集（所有 <ul> <li>、所有 选项卡 ）。

我所期待的是 div 宽度为 100%，带有一个包含元素的滚动条，如下所示： http://jsfiddle.net/zLez4drz/ （警告：fiddle 摘自我从中获取信息的另一个问题）

虽然我的输出是这个：

<-- 通过设置高度 50px

<-- 通过设置高度 100px

简而言之，根据设备（或分辨率）将元素打印在两行（或多行）上，而我希望它们全部内嵌打印并且能够水平滚动，而不管 <li>s 在父容器中。

Fiddle 继续：

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

My questions:

为什么会这样？有什么方法可以解决它，还是我应该根本不使用列表并重写 javascript 部分？
DOM 的其余部分可以影响这个吗？

Answer 1

您不能滚动浮动的元素。
您需要覆盖一些 Bootstrap 默认代码：

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

Here 是有效的 fiddle.

Bootstrap 标签 - 强制 inline-block 水平滚动显示

Bootstrap Tabs - Force inline-block display with horizontal scroll

css

twitter-bootstrap

bootstrap-tabs