Bootstrap响应式导航栏在浏览器中进行缩放时有效,但在我的手机上则无效

时间:2015-05-06 21:34:42

标签: css node.js twitter-bootstrap pug

我有一个个人应用程序,我一直在使用nodejs,用jade表达构建UI。该网站在浏览器和我尝试过的所有移动模拟器中扩展文件。该网站是myrecipes.me,有问题的代码如下。

nav.navbar.navbar-default.navbar-fixed-top(role="navigation")
  .container-fluid
    .navbar-header
      button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.navbar-brand.title(href='#') 
        img(src='/img/myrecipelogo.png', alt='Main Image', height='40px')
    .navbar-collapse.collapse#navbar
      ul.nav.navbar-nav                
        li.dropdown
          a.dropdown-toggle#cocktailList(href='#', data-toggle='dropdown')
            | Drinks
            b.caret
          ul.dropdown-menu
            li
              a(href='../newrecipe') Add a Recipe 
            li.divider  
              each drink in drinks
                -if(drink.type == 'cocktail')
                  li
                    a.dropCockails(id="#{drink._id}")= drink.name
        li.dropdown
          a.dropdown-toggle#foodList(href='#', data-toggle='dropdown')
            | Food
            b.caret
          ul#dropFood.dropdown-menu
            li
              a(href='../newrecipe') Add a Recipe 
            li.divider
              each drink in drinks
                -if(drink.type == 'food')
                  li
                    a.dropCockails(id="#{drink._id}")= drink.name            

2 个答案:

答案 0 :(得分:1)

标题中是否有设置视口的内容?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

答案 1 :(得分:0)

我在this link上发现了对此问题的修复。我在NameCheap上使用url-iframe转发URL,因此我可以保持域名的地址可见,但iframe会转储元标记。因此,使用网址重定向重定向我的网址可以正常工作,但之后我会查看托管网址。希望这可以帮助其他人解决同样的问题。