Question

我正在尝试使用bootstrap创建一个网格，如果我有5个框，第5个框出现在第2行的最右边，如果我有6个框，第6个框出现在第3行的第1个cloumn，第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.

enter image description here

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.
| ---------- || ---------- || ---------- || ---------- |

Answer 2

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

如果您查看bootstrap-3.1.1/less/variables.less并查找：

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

如果你想要的话，可以将数字设置为10甚至20，甚至可以设置为5.问题是如果你在这个文件中更改它，你将为整个网站设置它。

最好的方法是覆盖variables.less，或者只是在Bootstrap导入开头覆盖这个@grid-columns变量。

试着看一下这篇文章，我希望它可以帮到你。

Override a Bootstrap variable

Answer 3

我已经通过添加一个新行解决了这个问题，并且在将它们添加到新行之后，第5和第6个元素按预期进行了修改。

引导程序中的网格无法正常工作

3 个答案: