如何在Bootstrap中实现15列？

Question

我有一个明确为1200px / 15 cols framework制作的版面设计，但我的客户想要使用Bootstrap。是否甚至可以将Bootstrap转换为15 cols布局？我还没有在网上看过这样的例子。对于小型项目，我不是Bootstrap的忠实粉丝。老实说，这是一个不明白的趋势。可能对于一个5页的网站来说太沉重了。项目通常是根据内容完成的，而不是根据某些框架，Twitter支持与否。

但是，就是这样。

如果可以编写15个cols布局，你能给我一个如何开始的提示吗？进行这样的改编需要多长时间？

Answer 1

您可以转到：

自定义和下载自己的Bootstrap组件

http://www.elastic.co/guide/en/elasticsearch/guide/master/combining-filters.html

向下导航到“grid-columns”

设置首选列数并滚动到底部以单击“编译和下载”。

我通常建议使用偶数列而不是奇数，以便于数学运算。

Answer 2

如果您可以运行自定义版本的Bootstrap，那么xengravity的答案就是您的选择。

但是，如果您使用的是vanilla bootstrap（可能来自CDN或遗留代码），您可以使用一些CSS调整和一些嵌套的行/列来创建所需的效果。

从col-xs-4的3列布局开始，然后填充row和5 col-xs- *（我选择3，因为它关闭）并用一些CSS调整宽度。例如：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-3 fixed">1</div>
                <div class="col-xs-3 fixed">2</div>
                <div class="col-xs-3 fixed">3</div>
                <div class="col-xs-3 fixed">4</div>
                <div class="col-xs-3 fixed">5</div>
            </div>
        </div>
        . . .
    </div>
</div>

和CSS：

.col-xs-3.fixed {
    width:20%;
}

有关交互式示例，请参阅此fiddle。

更简洁的方法是从col-xs-3添加CSS / LESS，只需制作fixed-col或类似的类。

<强>更新 注释中提到的列包装/间距的功能是由于列的默认填充使其对于行和包装而言太大​​。如此updated fiddle中所示，删除.fixed列的填充可以修复它。这可能是不可取的，因此需要针对您的特定应用进行此类调整。