grid in bootstrap not working as expected

Question

I am trying to create a grid using bootstrap and if I have 5 boxes, 5th box appears on right most of 2nd row while if I have 6 boxes, 6th box appears on 1st cloumn of 3rd row leaving first 3columns of 2nd row empty. Why does this happen? Following is the code

<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

well the reason is simple. bootstrap has only 12 columns in the grid while you are using more in your application. The sum of col-lg's or col-sm's can be only 12

you can find more information here: 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.
| ---------- || ---------- || ---------- || ---------- |

Answer 2

If you use current Bootstrap version (v3.1.1), and if you take the source, it is possible to change the number of grid columns.

If you take a look in bootstrap-3.1.1/less/variables.less and look for:

//** Number of columns in the grid.
@grid-columns:              12;

It is possible to set the number to 10, or even 20 if you want, or even 5. The problem is that you will set it for the entire website if you change it in this file.

The best way of doing it is to overwrite variables.less, or just override this @grid-columns variable at the beginning of Bootstrap imports.

Try to take a look at this post, I hope it could help you.

Override a Bootstrap variable

Answer 3

我通过添加新行来解决此问题，并将第5和6th个元素添加到新行中后，它们的行为符合预期。