天真的第一次尝试

Created: November-22, 2018

在开始之前，让我们为示例定义一些 CSS。这是我们样本中的 head 部分。我在测试时总是使用 border-radius 和 background-color，因为它可以简单地看到单元格分裂，而不会增加任何可能影响单元格大小的边框大小。

<head>
    <title></title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        /* colorize all col- */
        [class^="col-"] {
            min-height: 30px;
            border-radius: 10px;
            background-color: lightblue;
        }
        /* a tall cell */
        .cell-tall {
            height: 100px;
            background-color: orange;
        }
        /* a medium-height cell */
        .cell-med {
            height: 50px;
            background-color: lightgreen;
        }
        /* padding top-bottom for some row examples */
        .row.padded {
            padding: 1rem 0 1rem 0;
        }
    </style>
</head>

有了这个，让我们定义一个网格，看看所有视口大小的完美结果！

使用 col-xs-6 col-md-3

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 col-md-3">1</div>
        <div class="col-xs-6 col-md-3">2</div>
        <div class="col-xs-6 col-md-3">3</div>
        <div class="col-xs-6 col-md-3">4</div>
        <div class="col-xs-6 col-md-3">5</div>
        <div class="col-xs-6 col-md-3">6</div>
        <div class="col-xs-6 col-md-3">7</div>
        <div class="col-xs-6 col-md-3">8</div>
        <div class="col-xs-6 col-md-3">9</div>
        <div class="col-xs-6 col-md-3">10</div>
        <div class="col-xs-6 col-md-3">11</div>
    </div>
</div>

StackOverflow 文档

前两个图像显示了中小屏幕尺寸的渲染。请记住，因为 col-md-3，我们将在中+上获得四列，而由于 col-xs-6，我们将获得两个小的单元格。

看起来不错，对吧？我想我们在这里完成了！说很多天真的 Bootstrap 网站就在那里等着打破……