如何使用Twitter Bootstrap使网站移动友好？

我正在使用Twitter Bootstrap，当我在移动设备中打开它时，我的网站遇到了一些问题。如何使用Twitter Bootstrap使网站移动友好？

我的头看起来很糟糕，当我调整窗口的大小，它看起来像这样：

它应该是这样的所有设备：

这里是我的HTML：

 <ul class="nav pull-right"> 

      <li><a href="index.html"><b>Home</b></a></li> 
      <li class="divider-vertical"></li> 

      <li class="dropdown"> 
      <a href="#" class="dropdown-togle" data-toggle="dropdown"> 
      <b>Download</b> 
      <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="downloading_link.html">Meepo for iPhone</a></li> 
      <li><a href="#" id="not_active">Android coming soon</a></li> 
      </ul> 
      </li> 

      <li class="divider-vertical"></li> 
      <li><a href="faq.html"><b>F.A.Q.</b></a></li> 
      <li class="divider-vertical"></li> 
      <li><a href="support/index.html" id="last_link"><b>Support</b></a> 
      </li> 
     </ul>

和CSS：

.navbar .nav.pull-right { 
    margin-left: 10px; 
    margin-top:40px; 
    margin-right: 0; 
    background-image: url('../img/menuBG.png'); 
    background-repeat: no-repeat; 
    height:57px; 
    }

我想我需要在这里删除背景图片，以使它可以在移动设备上使用。

我可以让它在移动设备上看起来更好吗（与PC相同）？我需要为手机写一些新的CSS？也许我不应该使用响应的CSS来调整大小？

来源

2012-09-24 MID

要使它你也必须包含'bootstrap-responsive.css'。在这种情况下，“background-image”与你的问题无关。完整的HTML代码赞赏 //编辑：只需要搜索链接。请检查这个。 http://twitter.github.com/bootstrap/scaffolding.html#responsive – sascha

@ Sn0opy，我使用responsive.css，但我想我在代码中犯了一些错误。我的图片具有静态宽度，当我调整窗口大小时，它的宽度保持不变，所以它看起来像这样。我的问题是在错误地使用响应的CSS。你能告诉我可以犯什么错吗？愚蠢的问题，但仍然卡住了。 – MID

转到http://twitter.github.com/bootstrap/components.html#navbar - 有一个解释如何使用导航栏进行响应式设计。它在移动设备上使用不同的导航栏/较低的分辨率。 – sascha

这是做溢出。

您需要将溢出设置为隐藏或无; 您可以采取其他一些措施来防止这种情况发生。

设置视口元标记正确可以帮助，这将是这个样子：

<meta name='viewport' content='user-scalable=no'>

您也可以使用关系值是很好地扩展你的菜单项，如EMS或百分比。一个快速的方法像素值转换为EMS是由父元素的字体大小（平时身体被周围的16像素）

所以你的CSS现在看起来是这样来划分：

.navbar .nav.pull-right { 
    margin-left: 0.625em; 
    margin-top: 2.5em; 
    margin-right: 0; 
    background-image: url('../img/menuBG.png'); 
    background-repeat: no-repeat; 
    height:3.5em; 
}

来源

2012-09-24 08:38:25

如何使用Twitter Bootstrap使网站移动友好？

回答

相关问题