1

我已经检查过：

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

我做了什么：

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

原来的聊天布局是：

在此处输入图像描述

我想要完成的是在“聊天”文本下方添加一个“用户列表”，为了实现这一点，我已经制作了整个服务器逻辑，并且为了能够显示/隐藏聊天，我使用引导程序的标签： 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）
  • 创建一个流体行（row-fluid）
  • 创建一个 col-lg-12 元素（填充行）
  • 在其中解析整个元素集（所有<ul> <li>，所有选项卡）。

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

在此处输入图像描述

而我的输出是这个： http://prntscr.com/7nlh83

<-- 通过设置高度 50px

在此处输入图像描述

<-- 通过设置高度 100px

简而言之，根据设备（或分辨率）将元素打印在两行（或多行）上，而我希望它们全部内联打印并且无论<li>父容器内的 s 数量如何都能够水平滚动。

小提琴工作：

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

我的问题：

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

1 回答 1

4

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

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

这是一个工作小提琴。

于 2015-07-01T17:13:03.393 回答