如何使用Twitter Bootstrap使网站适合移动设备?

时间:2012-09-24 07:36:31

标签: html css mobile 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;
   }

我想我需要在此删除背景图片,以便在移动设备上使用。

我可以在moble设备上使其看起来更好(与PC相同)吗?我只需要为手机写一些新的CSS吗?也许我不应该使用响应式CSS来调整大小?

1 个答案:

答案 0 :(得分:6)

这样做会溢出。

您需要将overflow设置为hidden或none; 还有一些其他方法可以防止这种情况发生。

正确设置视口元标记可以提供帮助,如下所示:

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


您还可以为可以很好地扩展的菜单项使用关系值,例如ems或百分比。将px值转换为ems的快速方法是除以父元素的font-size(通常是大约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;
}