Javascript 引导中的网格未按预期工作_Javascript_Css_Twitter Bootstrap

Javascript 引导中的网格未按预期工作

javascript css twitter-bootstrap

Javascript 引导中的网格未按预期工作,javascript,css,twitter-bootstrap,Javascript,Css,Twitter Bootstrap,我正在尝试使用引导创建一个网格，如果我有5个框，第5个框将显示在第2行的最右边，而如果我有6个框，第6个框将显示在第3行的第1行，第2行的前3列将为空。为什么会发生这种情况？下面是代码 <div class="row">  <div class="col-lg-3 col-sm-3 focus-box red wow fadeInLeft animated" data-wow-offset="30

我正在尝试使用引导创建一个网格，如果我有5个框，第5个框将显示在第2行的最右边，而如果我有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.


真正的浏览器

一些文本。

警报

一些文本。

同意

一些文本。

更快的释放

一些文本。

同意

一些文本。

同意

一些文本。

同意

一些文本。

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

您可以在此处找到更多信息：

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

您可以在此处找到更多信息：

如果使用当前引导版本（v3.1.1），并且使用源代码，则可以更改网格列的数量

如果查看

bootstrap-3.1.1/less/variables.less

并查找：

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

可以将数字设置为10，如果需要，甚至可以设置为20，甚至可以设置为5。问题是，如果您在此文件中更改它，您将为整个网站设置它

最好的方法是重写variables.less，或者在引导导入开始时重写这个

@grid columns

变量

试着看看这篇文章，我希望它能帮助你