更改Twitter的Bootstrap 2.x宽度为移动设备

Question

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

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

Answer 1

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

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

示例：

<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 * classe被重命名为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/