【问题标题】：Changing Twitter's Bootstrap 2.x widths for mobile为移动设备更改 Twitter 的 Bootstrap 2.x 宽度
【发布时间】：2013-06-21 18:57:23
【问题描述】：

如果这是一个简单的问题，我很抱歉，但这是我第一次使用引导程序。我的网站在水平时出现在移动设备中的方式存在问题。一个部分的两侧都有大量空间。请看图片：

这似乎只是 320 和 768 大小之间的问题。任何更小的空间都消失了，任何更大的都出现在一行中。我真的很感激任何方向，因为我不确定我需要更改哪个部分才能开始搞乱事情。

【问题讨论】：

需要看一些代码..
感谢您的回复。好的，这里有一些来自模板的代码： countModules('user1')) : ?>

标签： mobile twitter-bootstrap joomla

【解决方案1】：

请先阅读 Twitter 的 Boostrap 网格：http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

每一行（行流体类）包含 12 列。低于 768 像素的屏幕宽度列堆栈。您可以使用 span* 类来拆分列块。

例子：

<div class="container" id="firstrow">
    <div class="row-fluid">
    <div class="span6">Content 1</div>
    <div class="span6">Content 2</div>
    </div>  
</div>

767 像素以上内容 1 和内容 2 将彼此相邻显示。在 768 像素以下，它们将显示在彼此下方（堆叠）。如果您不希望列堆叠在 320px 和 768px 之间，您可以使用媒体查询。使用上面的示例代码：

    @media (min-width: 320px) and (max-width: 767px)
    {
    /* Styles */
    #firstrow div.span6{ display: block;  float: left; width:48.9362%;}
    }

使用 Twitter 的 Bootstrap 3.x 时

~~Twitter 的 Bootstrap 3 也有一个 12 列的小网格。您可以为此使用特殊的 col-small-span-* 类。还提 span* 类重命名为 col-span-*:~~

~~<div class="col-span-4 col-small-span-6">~~

见：Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

要将堆叠点设置为 480px，您必须重新编译您的 css。将@screen-small 设置为 480px；并定义你的cols：在那之后。请注意，这将更改 @grid-float-breakpoint 也因为它被定义为 @grid-float-breakpoint: @screen-tablet;。

另见：http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

【讨论】：