Question

对于我正在进行的项目，我想在我的网格系统中用7列填充整个.container。我可以通过在http://getbootstrap.com/customize/#grid-system编译bootstrap.css文件之前操作正确的Less变量（@grid-columns）来实现。

但是，如果我在同一站点的另一个实例想要回到正常的12列网格系统怎么办？

如果我要创建另一个bootstrap.css，将@grid-columns保留为12，我仍然无法将其加载到浏览器，因为它会与先前创建的bootstrap.css冲突，因为类似的类引用将用于两个（例如.col-md-7）css文件。

不能解决这个问题，但必须有办法，对吧？！？或者，也许我只是遗漏了一些东西。

Answer 1

你可以选择84列。并使用它，以便如果您需要7列，那么一列宽度将是12个自举列。 12 12 12 12 12 12 12 = 84

如果您需要12列，那么一列宽度将是7个引导列。 7 7 7 7 7 7 7 7 7 7 7 7 = 84

虽然最初可能需要大量计算，但这应该可行。

只是一个基本的数学解决方案，如果没有其他工作。

另一个解决方案是分叉SASS或LESS版本的bootstrap并生成您自己的bootstrap版本。例如，您添加类似于col-7-xs-...的类。我刚检查了SASS版本。在_grid-framework.scss文件中有mixinis你可以更改和使用，这样你就可以轻松地添加自己的网格类。

我不明白为什么不应该这样做。

Answer 2

首先，您应该问自己，7列的几个实例是否值得要求另一个网格系统。让我们看看这个页面http://getbootstrap.com/components/他们有8＆＃34;列＆＃34;对于图标，但他们没有使用网格系统，他们编写适当的自定义CSS来完成无序列表的工作。

这是一个想法：

https://jsbin.com/pofofe/1/

https://jsbin.com/pofofe/1/edit?html,css,output

HTML（注释是为了防止内联块的额外空间）

 <div class="container">
  <div class="row seven-col">

    <div>1</div><!-- do not remove 
    --><div>2</div><!-- do not remove 
    --><div>3</div><!-- do not remove 
    --><div>4</div><!-- do not remove 
    --><div>5</div><!-- do not remove 
    --><div>6</div><!-- do not remove 
    --><div>7</div>

  </div>
</div>

<强> CSS：

.row.seven-col {
    text-align: center
}
.row.seven-col > div {
    border: 1px solid red;
    padding-left: 15px;
    padding-right: 15px;
    min-height: 30px;
}
@media (min-width:480px) { 
    .row.seven-col > div {
        display: inline-block;
        width: 50%;
    }
}
@media (min-width:600px) { 
    .row.seven-col > div {
        width: 25%
    }
}
@media (min-width:992px) { 
    .row.seven-col > div {
        width: 14.285%
    }
}

正如您所看到的那样，它可以顺利运行，并且它比另一个网格系统副本的CSS行数要少得多。

重要：

.img-responsive在内联块或表格或显示内不起作用：表格等，使用：

.row.seven-col img {width:100%;height:auto;}

Bootstrap 3 - 一个站点中的多个网格系统

2 个答案:

https://jsbin.com/pofofe/1/