twitter bootstrap 中的五个相等的列

小编典典

twitter bootstrap 中的五个相等的列

all

我想在我正在构建的页面上有 5 个相等的列，但我似乎无法理解这里如何使用 5 列网格：http:
//web.archive.org/web/20120416024539/http ://domain7
.com/mobile/tools/bootstrap/responsive

上面演示的五列网格是 twitter bootstrap 框架的一部分吗？

阅读 92

2022-03-22

共1个答案

小编典典

使用五个具有 span2 类的 div，并给第一个类 offset1。

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

瞧！五个等距且居中的列。

在 bootstrap 3.0 中，这段代码看起来像

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

更新

由于 bootstrap 4.0 默认使用 Flexbox：

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

2022-03-22