Question

我已经检查过：

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

我做了什么：

我正在使用一个免费的bootstrap模板（sb-admin 2，可以在这里找到：http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html），更准确地说，我实际上正在进行＆＃34;聊天＆＃34;面板。

原始聊天布局为：

enter image description here

我想要完成的是添加一个＆＃34;用户列表＆＃34;低于＆＃34;聊天＆＃34;为了能够显示/隐藏聊天记录，我已经制作了整个服：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/ （警告：从我从中获取信息的另一个问题中提取的小提琴）

enter image description here

虽然我的输出是这一个而是：

＆lt; - 通过设置高度50px

enter image description here

＆lt; - 通过设置高度100px

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

努力工作：

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

我的问题：

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

Answer 1

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

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

Here是一个工作小提琴。

Bootstrap选项卡 - 使用水平滚动强制内联块显示

1 个答案: