如何使用bootstrap3网格系统答案

【问题标题】：how to use bootstrap3 grid system如何使用bootstrap3网格系统
【发布时间】：2013-09-20 07:58:46
【问题描述】：

我已经使用 twitter bootstrap 一年了，它是其中之一——“正常工作”。随着 twitter bootstrap3 的发布，它的移动优先方法变得更好、更棒了。但我无法理解如何通过移动优先方法正确使用它。

以前有 .span* 和 .offset* 类，但现在分别有 .col-xs-* .col-md-* .col-sm-* .col-lg-* 和 .col-xs-offset-* .col-md-offset-* 类。即使现在使用.col-md-* 'it-just-works' 我想知道使用所有这些类的正确方法，以便不仅使用它们，而且正确使用它们以充分利用 bootstrap3。

谢谢。

【问题讨论】：

你可以去getbootstrap.com学习。
我知道如何使用 bootstrap 我的问题是关于 bootstrap3 用于移动优先方法的各种类如何使用它们

标签： css twitter-bootstrap twitter-bootstrap-3 css-frameworks

【解决方案1】：

我发现 (a) Bootstrap 自己的文档在这里很有帮助，而且 (b) lynda.com 主题在迁移到 Bootstrap 3 时也很有帮助。具体来说，请参阅“处理网格更改”

(a)http://getbootstrap.com/css/#grid-offsetting

(b)http://www.lynda.com/course20/Bootstrap-tutorials/Bootstrap-3-New-Features-Migration/138156-2.html

【讨论】：

【解决方案2】：

我发现这些链接很有帮助：

http://www.helloerik.com/bootstrap-3-grid-introduction

http://bootply.com/bootstrap-3-migration-guide

【讨论】：

【解决方案3】：

目前我正在使用 Bootstrap 3 进行 Web 开发，我是如何使用 Grid 系统的，

<div class="container">
    <div class="row">
        <div class="col-md-9">     <%--this for 9X3 grid--%>
            <div class="row">
                <div class="col-md-6">   <%--this for 6X6 inner grid--%>

                </div>
                <div class="col-md-6">

                </div>
            </div>
        </div>
        <div class="col-md-3">

        </div>
    </div>
</div>

【讨论】：

关于使用 bootstrap3 作为移动优先方法的问题
对于超小型设备电话（
对于移动优先方法，首先使用“col-xs-”类，然后使用其他类，例如“
"
这取决于您的需要