css - Bootstrap 中的行类有什么用？

Question

我认为这可能是个愚蠢的问题，但我不明白 Twitter Bootstrap 中 .row 类的用法。那么，它的用途是什么？

我试图在这个结构中做这样的事情:

LOGO
SUB-MESSAGE
MENU 1  | MENU 2  | MENU 3  | MENU ...
CONTENT                                            | ADS
CONTENT                                            | ADS
CONTENT                                            | ADS
CONTENT                                            | ADS
...                                                | ...

这个的基本结构应该是什么以及需要行的地方？

Answer 1

Bootstrap 翻译了普通表行的使用，<tr> , 变成一个更语义化的构建 block ，你可以用它来布局你的设计，并且他们还翻译了表数据 block ，<td> , 进入 .span*用于分隔内容的类，称为网格。基本上，您可以将一行想象成一个水平容器，您可以在其中填充构建 block ，即 span。标签，您稍后可以将其堆叠在其他行的上方或下方以创建布局。

因此，为了说明您的布局，您可以像这样使用一堆行:

<row>
    <span>LOGO</span>
    SUB-MESSAGE
</row>

<row>
    <span>MENU 1  | MENU 2  | MENU 3  | MENU ...</span>
</row>

<row>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
</row>

注意行如何分隔您希望分隔的不同级别的内容。您可以在 Bootstrap 脚手架上找到有关网格系统使用的更多信息 documentation , 它们还有一个堆叠网格，您可以查看源代码以了解行是如何堆叠的以及其中的内容是如何组合在一起的。