如何使用Twitter Bootstrap使网站适配移动端？

Question

我正在使用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进行调整大小？

- 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

Answer 1

这是由于溢出导致的。

你需要将溢出设置为hidden或none；还有一些其他的方法可以防止这种情况发生。

正确设置viewport元标记可以帮助解决问题，示例如下：

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

你也可以使用关系型的值来设置菜单项，比如ems或百分比，这样会更加具有可扩展性。将px值转换为ems的快速方法是除以其父元素的字体大小（通常为body的大小约为16px）。

因此，你的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;
}

- Vita Pluvia