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

Posted

技术标签:

【中文标题】如何使用 Twitter Bootstrap 使网站适合移动设备?【英文标题】:How to make site mobile-friendly using Twitter Bootstrap? 【发布时间】:2012-09-24 07:36:30 【问题描述】:

我正在使用 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 来调整大小?

【问题讨论】:

要使其具有响应性,您还必须包含bootstrap-responsive.css。在这种情况下,background-image 与您的问题无关。感谢完整的 HTML 代码 // 编辑:只需要搜索链接。请检查这个。 twitter.github.com/bootstrap/scaffolding.html#responsive @Sn0opy,我确实使用了 responsive.css,但我认为我在代码中犯了一些错误。我的图像具有静态宽度,当我调整窗口大小时,它保持相同的宽度,所以它看起来像这样。我的问题是错误地使用了响应式 css。你能说出我做错了什么吗?愚蠢的问题,但我还是被卡住了。 转到twitter.github.com/bootstrap/components.html#navbar - 有一个说明如何使用导航栏进行响应式设计。它在移动设备上使用不同的导航栏/分辨率较低。 【参考方案1】:

这是为了溢出。

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

正确设置视口元标记会有所帮助,如下所示:

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

您还可以对缩放良好的菜单项使用关系值,例如 em 或百分比。将 px 值转换为 em 的一种快速方法是除以父元素的字体大小(通常主体为 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;

【讨论】:

以上是关于如何使用 Twitter Bootstrap 使网站适合移动设备?的主要内容,如果未能解决你的问题,请参考以下文章

你怎么知道如何使用 twitter-bootstrap?

如何使用 Twitter Bootstrap 弹出框进行 jQuery 验证通知?

如何在 twitter-bootstrap-3 模态框中使用复选框

如何使用 Twitter Bootstrap 3 设置颜色主题?

如何使用 twitter bootstrap 使文本和画布响应?

如何使 Twitter Bootstrap 工具提示有多行?