Twitter Bootstrap 对于移动设备来说太宽了答案

【问题标题】：Twitter Bootstrap is too wide for mobileTwitter Bootstrap 对于移动设备来说太宽了
【发布时间】：2013-03-07 08:40:09
【问题描述】：

我使用 Twitter Bootstrap 为我的网站做了一个简单的设计。代码如下：

<!DOCTYPE html>

<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="pl-PL"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="pl-PL"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="pl-PL"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="pl-PL"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="pl-PL"><!--<![endif]-->

<head>

    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="http://localhost/images/fav.ico">
    <link rel="stylesheet" href="http://localhost/bootstrap.css">
    <link rel="stylesheet" href="http://localhost/style.css">

    <!--[if lt IE 9]>
    <script src="http://localhost/js/html5shiv.js"></script>
    <script src="http://localhost/js/respond.js"></script>
    <![endif]-->


    <link rel="alternate" type="application/rss+xml" title=" &raquo; Kanał z wpisami" href="http://localhost/feed/" />
<link rel="alternate" type="application/rss+xml" title=" &raquo; Kanał z komentarzami" href="http://localhost/comments/feed/" />
<link rel='stylesheet' id='contact-form-7-css'  href='http://localhost/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.2' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<style type="text/css">
sup {
    vertical-align: 60%;
    font-size: 75%;
    line-height: 100%;
}
sub {
    vertical-align: -10%;
    font-size: 75%;
    line-height: 100%;
}
.amp {
    font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
    font-weight: normal;
    font-style: italic;
    font-size: 1.1em;
    line-height: 1em;
}
.caps {
    font-size: 90%;
}
.dquo {
    margin-left:-.40em;
}
.quo {
    margin-left:-.2em;
}
/* because formatting .numbers should consider your current font settings, we will not style it here */
</style>
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>

<body class="home blog">    
    <div id="wrap" class="container">
        <!-- #header -->
        <header id="header" class="span12">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <h1 class="brand"><a href="http://localhost"></a></h1>
                        <div class="nav-collapse collapse hidden-mobile">
                            <ul class="nav pull-right">
                                <li><a href="#about" title="O mnie">O mnie</a></li>
                                <li><a href="#showcase" title="Realizacje">Realizacje</a></li>
                                <li><a href="#contact" title="FAQ / Kontakt">FAQ i kontakt</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- /#header -->


<!-- #slider -->
<section id="slider" class="hidden-phone carousel slide">
    <div>
        <article class="item"></article>
        <article class="item"></article>
    </div>
</section>


    </div>

    <script type='text/javascript' src='http://localhost/wp-content/plugins/contact-form-7/includes/js/jquery.form.js?ver=3.09'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/192.168.1.2\/\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Wysy\u0142anie..."};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.2'></script>
<script src="http://localhost/js/jquery.js"></script>
<script src="http://localhost/js/bootstrap.min.js"></script>
<script src="http://localhost/js/plugins.js"></script>
<script src="http://localhost/js/script.js"></script>

<!--

<script>

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-XX']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
-->

</body>

</html>

我确实包含了 Bootstrap 的两个 css 文件（合并为一个 - 首先是 bootstrap.css，然后是 bootstrap-responsive.css）和底部的 bootstrap.js。但是我有一个非常奇怪的问题（自从我使用 Twitter Bootstrap 以来第一次） - 在我的手机（华为 Ascend）上，机身太宽（无论方向如何）。它似乎有一些填充 - 所以我删除了body 的填充，但它没有帮助。即使我删除我的 CSS 并只保留 Bootstrap 的，问题仍然可见。

【问题讨论】：

在您的手机上查看类似这样的 Bootstrap 演示页面时，您是否遇到同样的问题？ twitter.github.com/bootstrap/examples/fluid.html
否 - 这就是问题所在。我检查了另外两部手机（三星、Galaxy 551 和 Galaxy II），都是一样的。
尝试删除标题标签上的 class="span12" ......你不在那儿排成一排，所以也许这会破坏它？
这也不是@ThomPorter。我设置了.container {width:100%!important}，它有帮助。

标签： twitter-bootstrap

【解决方案1】：

设置

.container { width: 100% !important }

帮助。我仍然不知道为什么会发生这种情况。

【讨论】：

【解决方案2】：

这是一个非常糟糕的修复。尝试将.container 更改为.container-fluid 看看会发生什么...

将宽度设置为 100% 会给您带来其他麻烦...

【讨论】：

这是迄今为止唯一一个工作的。如果您有任何想法如何避免将container 设置为100%，我很想听听（真的，没有讽刺 :)）。

【解决方案3】：

问题中未指定 Bootstrap 版本，尽管它是在 v3.0 发布之前发布的。

无论如何，如果有人碰巧遇到这个话题并且对 v3.x 有同样的问题，这就是我所做的。 YMMV 取决于您的 .container div 是否直接位于

下方..

/* Fix for viewport being too wide below smallest breakpoint */
@media (max-width: 767px) {
    body > .container { overflow: hidden; } /* fix */
    body > .container > * { overflow: visible; } /* reset back to normal */
}

【讨论】：

【解决方案4】：

尝试将.container 更改为.container-fluid 并将<div class="row-fluid"> 添加为.container-fluid 的直接子代。

【讨论】：