css - Bootstrap 自定义网格列

Question

如何为 div 的一个元素制作自定义网格列？ 我需要每行 5 列(每行 20% 宽度)。

例子:

<div id="parent">
    <div class="row">
        <div class="col-md-9">...</div>
        <div class="col-md-3">...</div>
    </div>
    <div class="row">
        <div class="col-md-2">...</div> <!-- 1 -->
        <div class="col-md-2">...</div> <!-- 2 -->
        <div class="col-md-2">...</div> <!-- 3 -->
        <div class="col-md-2">...</div> <!-- 4 -->
        <div class="col-md-2">...</div> <!-- 5 -->
    </div>
</div>

我正在使用 Bootstrap 3.1.1

Answer 1

部分解决方案将是描述的 here (添加偏移量)。

但是，如果您想正确地执行此操作，则必须创建新类以使用适当的宽度覆盖 Bootstrap 的默认值。然后将此类添加到每一列。

.5-col-grid {
    width: 20%;
}

此外，如果您想在较小的屏幕分辨率下使用 100% 宽度，您可以设置 CSS @media 支持。