天真的第一次嘗試

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 網站就在那裡等著打破……