Twitter Bootstrap действует по-разному между запуском из файла и с веб-сервера

Question

Я попытался написать небольшой сайт с новым фреймворком Bootstrap 2. Я запустил статический HTML-код, дважды щелкнув файл в браузере файлов, и все прошло нормально. Но когда я загрузил его на веб-хост, он действует по-другому.

Локально, если ширина браузера меньше 940 пикселей, меню компактифицируется, как видно из этого рабочего примера: http://twitter.github.com/bootstrap/examples/starter-template.html. Но если я получу доступ к тому же файлу на своем веб-хосте, ссылки останутся прежними.

Я пытался минимизировать свой пример, но до сих пор не понимаю, как вызвано изменение в поведении. Поэтому я выложил минимизированный пример в Интернете и надеюсь, что вы мне поможете. Вы можете посмотреть файл онлайн здесь: http://users.skynet.be/ingdasite/miniCase/t.html. И вы можете скачать zip-файл из файлов, которые я извлек здесь: http://dl.dropbox.com/u/16797591/miniCase.zip.

обновление: проблема остается, когда я отключаю javascript, поэтому это должна быть ошибка css

Answer 1

Необходимо убедиться, что отзывчивая таблица стилей заканчивается расширением .css.

После того, как я переименовал файл с расширением .css, он работал нормально.

Кроме того, выможет потребоваться переместить адаптивную таблицу стилей под тегом стиля следующим образом:

<link href="assets/css/bootstrap.css" rel="stylesheet">
<style>
  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  }
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Это позволит удерживать панель навигации вверху, а не опускать ее, если ширина браузера меньше 940 пикселей.

Я загрузил измененную версию в Dropbox здесь: http://db.tt/CNB8GxAm

Ссылка: https://github.com/twitter/bootstrap/issues/1570