1

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

在此处输入图像描述

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

4

1 回答 1

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 的 Bootstrap 3 网格，更改断点和删除填充

要将堆叠点设置为 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/

于 2013-06-21T21:56:38.203 回答