javascript - Bootstrap 中的网格无法按预期工作

Question

我正在尝试使用 bootstrap 创建一个网格，如果我有 5 个框，第 5 个框出现在第二行的大部分右侧，而如果我有 6 个框，第 6 个框出现在第 3 行的第 1 列，留下第 2 行的前 3 列空的。为什么会这样？以下是代码

<div class="row">

    <!-- FIRST FOCUS BOXES -->
    <div class="col-lg-3 col-sm-3 focus-box red wow fadeInLeft animated" data-wow-offset="30" data-wow-duration="1.5s" data-wow-delay="0.15s">
        <div class="service-icon">
            <i class="pixeden pd-icon-monitor"></i> <!-- FOCUS ICON-->
        </div>
        <h5 class="red-border-bottom">Real browsers</h5> <!-- FOCUS HEADING -->
        <p> <!-- FOCUS DESCRIPTION -->

             some text.  

        </p>
    </div>
    <!-- / END FIRST FOCUS BOX. Other boxes has same format -->

    <div class="col-lg-3 col-sm-3 focus-box green wow fadeInLeft animated" data-wow-offset="30" data-wow-duration="1.5s" data-wow-delay="0.15s">
        <div class="service-icon">
            <span class="pixeden pd-icon-email-marketing"></span>
        </div>
        <h5 class="green-border-bottom">Alerts</h5>
        <p>
             some text.  

        </p>
    </div>

    <div class="col-lg-3 col-sm-3 focus-box blue wow fadeInRight animated" data-wow-offset="30" data-wow-duration="1.5s" data-wow-delay="0.15s">
        <div class="service-icon">
            <i class="pixeden pd-icon-upload"></i>
        </div>
        <h5 class="blue-border-bottom">Concurrence</h5>
        <p>
             some text.  
        </p>
    </div>

    <div class="col-lg-3 col-sm-3 focus-box yellow wow fadeInRight animated" data-wow-offset="30" data-wow-duration="1.5s" data-wow-delay="0.15s">
        <div class="service-icon">
            <i class="pixeden pd-icon-check"></i>
        </div>
        <h5 class="yellow-border-bottom">Faster release </h5>
        <p>
             some text.  
        </p>
    </div>

    <div class="col-lg-3 col-sm-3 focus-box blue wow fadeInRight animated" data-wow-offset="30" data-wow-duration="1.5s" data-wow-delay="0.15s">
        <div class="service-icon">
            <i class="pixeden pd-icon-upload"></i>
        </div>
        <h5 class="blue-border-bottom">Concurrence</h5>
        <p>
             some text.  
        </p>
    </div>
    <div class="col-lg-3 col-sm-3 focus-box blue wow fadeInRight animated" data-wow-offset="30" data-wow-duration="1.5s" data-wow-delay="0.15s">
        <div class="service-icon">
            <i class="pixeden pd-icon-upload"></i>
        </div>
        <h5 class="blue-border-bottom">Concurrence</h5>
        <p>
             some text.  
        </p>
    </div>
    <div class="col-lg-3 col-sm-3 focus-box blue wow fadeInRight animated" data-wow-offset="30" data-wow-duration="1.5s" data-wow-delay="0.15s">
        <div class="service-icon">
            <i class="pixeden pd-icon-upload"></i>
        </div>
        <h5 class="blue-border-bottom">Concurrence</h5>
        <p>
             some text.  

Answer 1

嗯，原因很简单。当您在应用程序中使用更多时， Bootstrap 在网格中只有 12 列。 col-lg 或 col-sm 的总和只能是 12

您可以在这里找到更多信息: http://getbootstrap.com/css/#grid-example-basic

| ---------- || ---------- || ---------- || ---------- |
|  col-lg-3  ||  col-lg-3  ||  col-lg-3  ||  col-lg-3  |  SUM is 12 row is full.
| ---------- || ---------- || ---------- || ---------- |