Вкладки Bootstrap — принудительное отображение встроенного блока с горизонтальной прокруткой

Я уже проверил:

• Отображать ссылку на изображение встроенного блока с горизонтальной прокруткой
• Ряд начальной загрузки с горизонтальной прокруткой

но оба они на самом деле не решили мою проблему.

Что я наделал:

Я использую бесплатный шаблон начальной загрузки (sb-admin 2, который можно найти здесь: http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html), точнее, я фактически работаю над панелью "чат".

Первоначальный макет чата:

То, что я пытаюсь сделать, это добавить «список пользователей» под текстом «чата», и для этого я уже сделал всю логику сервера, и для того, чтобы иметь возможность показывать/скрывать чаты, я используя вкладки начальной загрузки: http://getbootstrap.com/javascript/#tabs (потому что так проще контролировать весь поток чата).

Чтобы не публиковать весь исходный код всего проекта (более 100 тысяч строк кода), я воспроизвел свою проблему на скрипке, чтобы опубликовать ее.

Релевантная часть тестирования, которое я провел, это вот эта (она содержит веточку, и я вежливо прошу вас игнорировать ее, ее не будет в тегах, потому что у меня нет любая проблема с веткой):

<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>, все вкладки).

Я ожидал, что у меня будет div шириной 100% с прокручиваемой полосой с элементами внутри, например: http://jsfiddle.net/zLez4drz/ (предупреждение: скрипт взят из другого вопроса, откуда я взял информацию)

В то время как мой вывод вместо этого:

‹-- установив высоту 50px

‹-- установив высоту 100px

В двух словах, элементы печатаются в двух (или нескольких) строках в зависимости от устройства (или разрешения), в то время как я хочу, чтобы все они печатались встроенными и могли прокручиваться по горизонтали независимо от количества <li> внутри родительского контейнера.

Скрипка, над которой нужно поработать:

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

Мои вопросы:

1. Почему это происходит? Есть ли способ решить эту проблему, или я должен вообще не использовать списки и переписать часть javascript?
2. Может ли остальная часть DOM повлиять на это?