Как я могу исправить мой HART-код Bootstrap 3 RC1 для работы в узком/мобильном режиме?

Question

Я использую следующий код Haml для создания Bootstrap 2.xy Navbar:

.navbar.navbar-fixed-top.navbar-inverse 
    .navbar-inner 
     .container 
      %a.brand{:href => '/'} xyz.com 
      %ul.nav 
       %li 
        %a{:href => '/'}Home 
       %li 
        %a{:href => '/blog'}Articles 
       %li 
        %a{:href => '/research'}Research 
       %li 
        %a{:href => '/contact'}Contact 
       %li 
        %a{:href => '/gallery',}Gallery 

При просмотре в узком окне браузера или на мобильном телефоне, элементы NavBar были хорошо сложены, как показано на скриншоте :

Я просто попытался модернизировать мой проект Bootstrap 3. Я сейчас, используя этот Haml код для навигационной панели:

.navbar.navbar-fixed-top.navbar-inverse 
    .container 
     %a.navbar-brand{:href => '/'} xyz.com 
     %ul.nav.navbar-nav 
      %li 
       %a{:href => '/'}Home 
      %li 
       %a{:href => '/blog'}Articles 
      %li 
       %a{:href => '/research'}Research 
      %li 
       %a{:href => '/contact'}Contact 
      %li 
       %a{:href => '/gallery',}Gallery 

Однако Navbar сейчас не работает, как и раньше (см второй скриншот):

Как я могу исправить код Haml, чтобы вернуться к старому поведению с помощью начальной загрузки 3 RC1?

Answer 1

Хотя Bootstrap 3,0 в RC1, по умолчанию версия доступна содержит CSS для отзывчивой навигационной панели (это также может быть верно и для будущих версий тоже)

Line 2922: http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css содержит медиа-запрос для мин-ширина 768px ,

Вы можете вручную добавить CSS, что делает элементы дисплея Navbar отображать встроенный в код:

<style> 
.navbar-brand { 
    float: left; 
    margin-right: 5px; 
    margin-left: -15px; 
} 
.navbar-nav { 
    float: left; 
    margin-top: 0; 
    margin-bottom: 0; 
} 
.navbar-nav > li { 
    float: left; 
} 
.navbar-nav > li > a { 
    border-radius: 0; 
} 
.navbar-nav.pull-right { 
    float: right; 
    width: auto; 
} 
.navbar-toggle { 
    position: relative; 
    top: auto; 
    left: auto; 
    display: none; 
} 
.nav-collapse.collapse { 
    display: block !important; 
    height: auto !important; 
    overflow: visible !important; 
} 
</style> 

Answer 2

включить ли это в вашей, как описано http://getbootstrap.com/getting-started/? У меня была такая же проблема без этого тега после перехода от 2,3

% мета {имя: «видовой экран», содержание: «ширина = устройство ширины, начальная масштаб = 1,0»}