使用 css 网格框架重复行/列代码答案

【问题标题】：Repeated row/col code with css grid framework使用 css 网格框架重复行/列代码
【发布时间】：2016-09-09 21:18:45
【问题描述】：

当使用 CSS 框架的网格系统时，例如 Bootstrap 或 Materialize，我发现自己经常输入以下 HTML：

<div class="row">
    <div class="col s12">
        <!-- Some text/ a button / something -->
    </div>
</div>

基本上我需要将一个项目，比如一个段落或一个按钮，放在页面上它自己的行上，为此我需要三个标签而不是一个标签。随着时间的推移，这会在我的 HTML 中产生很多膨胀。

我考虑过创建一个 angular 指令以使其成为一个额外的标签而不是两个，但我觉得这是一个草率的解决方案。有谁知道解决这个问题的更好方法吗？

【问题讨论】：

元素的display: block 不起作用吗？
如果你不想臃肿，就不要使用 CSS 框架。

标签： html css twitter-bootstrap frameworks materialize

【解决方案1】：

一个选项是创建一个代码snippet，所以如果你输入，element它将在完整的 HTML 中展开，sn-ps 在 sublime text、atom 文本编辑器中可用。 p>

另一个简单的选择是使用 emmet，它在前面提到的两个和括号中都有，像这样：

.row>.col.s12>element TAB

【讨论】：

【解决方案2】：

试试这样的..

.parent {
display: flex;
}

.child {
flex: 1;  /* will grow and shrink with the screen size
min-width: 20ems ; /* optional if you want the element to not fall below a certain width
}

这只是一个小例子。看看 flexbox，看看如何更好地设置 rgrids 的样式。

【讨论】：