html - 如何将此 Bootstrap 网格从 v2.x 迁移到 v3.x

Question

我想用 twitter bootstrap 3 创建这个网格。

<div class="container-fluid border">
    <div class="row-fluid debug2">
        <div class="span2 debug">aa</div>
        <div class="span3 debug">bb</div>

        <div class="span3 debug" style="float:left; height:300px;"></div>
    </div>

    <div class="row-fluid">
        <div class="span3">xxx</div>
    </div>

</div>

Grid Picture

Answer 1

您可以找到有关如何从 Bootstrap v2.x 升级到 v3.x 的指南 here .

row-fluid 现在是 row

.span* 现在是 .col-xs-*、.col-sm-*、.col-md -* 或 .col-lg-*。根据屏幕尺寸进行配置。

基本上它翻译成这样:

<div class="container border">
    <div class="row debug2">
        <div class="col-md-2 debug">aa</div>
        <div class="col-md-3 debug">bb</div>
        <div class="col-md-3 debug" style="float:left; height:300px;"></div>
    </div>
    <div class="row">
        <div class="col-md-3">xxx</div>
    </div>
</div>