Twitter bootstrap CSS框架中的网格嵌套

我不理解CSS框架中的网格嵌套

我使用的CSS框架是24列网格-一列=4.16667%，两列-8.33333%，十二列-50%，等等

这是我的1920像素浏览器宽度的网格-左侧部分=10列（41.66667%），右侧部分=14列（58.33333%）-

在右侧部分内有一个标题和一个内容块：

标题有1列填充（在基础上称为“推”）：

…

-正如您在附加图像上看到的，标题不适合网格

内容块有5列宽：

<div class="small-5 medium-5 large-5 xlarge-5 xxlarge-5">…</div>

…

-正如您在所附图像上看到的，该块不适合网格-它不是5列宽

这是绝对正确和明显的-右侧块的宽度是58.33333%，所以所有内部块的宽度百分比将相应地计算这个块的宽度，而不是整个窗口的宽度

我的问题是-如何为父块内的嵌套块拟合网格

---

响应框架使用父div的%宽度

根据你的需要进行计算有时会有点棘手和混乱

如果您查看您的需求，您希望将

5列

放入

14列

网格中

为了达到这个目的，你应该做这样的计算

您的

14列

现在是

24列

，而在14列中嵌套

5列

占据了

35.174%

的空间。考虑到

24列

将是

8.57列

，这不是一个整数，所以选择最接近它的一列（8或9列）

但是，如果您想在14列中准确地包含

5，即
60/7
在
24列中，您应该将其作为一个整数提供给您<代码>14*7列
10*7列
和
5*7列

您的网格应为
178列
，左侧为
70列
，右侧为
98列
和
35列
在
98列
网格内

为5列网格编写自定义类以占据35.17%

好吧，CSS框架只为第一级块提供一个网格-所有嵌套块都应该手动计算以适应顶级网格

这是计算红色块以适应主网格（右容器也会根据屏幕分辨率更改列数）：

---

这样，我不再使用HTML和基础框架的GRID.CSS文件中的列类，因为它是完全没有用的。

对于每个框架来说，事情都有不同的工作。

在级联框架中，网格元素基本上只需要

col

类，您可以无限嵌套

col

类

为了方便地进行无限嵌套，栅格元素既没有填充也没有边距。为了在页面上保持一致的边距，通常使用

单元格

类作为内容的包装来补充

列

类

例如：

<div class="col width-1of2">
    <div class="col width-1of2">
        <div class="cell">
            [Content]
        </div>
    </div>
    <div class="col width-fill">
        <div class="col width-1of3">
            <div class="cell">
                [Content]
            </div>
        </div>
        <div class="col width-1of3">
            <div class="col width-3of5">
                <div class="cell">
                    [Content]
                </div>
            </div>
            <div class="col width-fill">
                <div class="cell">
                    [Content]
                </div>
            </div>
        </div>
        <div class="col width-fill">
            <div class="cell">
                [Content]
            </div>
        </div>
    </div>
</div>
<div class="col width-fill">
    <div class="col width-1of4">
        <div class="cell">
            [Content]
        </div>
    </div>
    <div class="col width-fill">
        <div class="col width-2of3">
            <div class="cell">
                [Content]
            </div>
        </div>
        <div class="col width-fill">
            <div class="cell">
                [Content]
            </div>
        </div>
    </div>
</div>

[内容]
[内容]
[内容]
[内容]
[内容]
[内容]
[内容]
[内容]

---

另请参见和。

您介意链接到小提琴吗？-在那里你可以看到1920像素的网格。你想要适合什么？14列中的5列网格？是的，我希望5列块是真实的5列在右侧的14列块中-查看屏幕截图并与灰色的24列网格进行比较-5列块看起来不像5列。网格框架不是这样工作的。它们总是从包含元素的宽度中获取宽度。@artuska LCM所有网格值的宽度..:P

@media screen and (max-width: 1920px) { width: (5 / 14 * 100 + 0%); } /* width — 5 columns, parent container — 14 columns -> 35.7% */
@media screen and (max-width: 1440px) { width: (7 / 18 * 100 + 0%); } /* width — 7 columns, parent container — 18 columns -> 38.88 */
@media screen and (max-width: 1280px) { width: (7 / 18 * 100 + 0%); } /* width — 7 columns, parent container — 18 columns */
@media screen and (max-width: 1024px) { width: (10 / 22 * 100 + 0%); } /* width — 10 columns, parent container — 22 columns */
@media screen and (max-width: 640px) { width: (16 / 24 * 100 + 0%); } /* width — 16 columns, parent container — 24 columns */

<div class="col width-1of2">
    <div class="col width-1of2">
        <div class="cell">
            [Content]
        </div>
    </div>
    <div class="col width-fill">
        <div class="col width-1of3">
            <div class="cell">
                [Content]
            </div>
        </div>
        <div class="col width-1of3">
            <div class="col width-3of5">
                <div class="cell">
                    [Content]
                </div>
            </div>
            <div class="col width-fill">
                <div class="cell">
                    [Content]
                </div>
            </div>
        </div>
        <div class="col width-fill">
            <div class="cell">
                [Content]
            </div>
        </div>
    </div>
</div>
<div class="col width-fill">
    <div class="col width-1of4">
        <div class="cell">
            [Content]
        </div>
    </div>
    <div class="col width-fill">
        <div class="col width-2of3">
            <div class="cell">
                [Content]
            </div>
        </div>
        <div class="col width-fill">
            <div class="cell">
                [Content]
            </div>
        </div>
    </div>
</div>