Question

When using a CSS framework's grid system, like that of Bootstrap or Materialize for example, I find myself typing the following HTML very very often:

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

Essentially I need to put one item, say a paragraph or a button, on it's own row on the page, and in order to do so I need three tags instead of just one. This over time creates a lot of bloat in my HTML.

I have considered creating an angular directive to make it one extra tag instead of two, but I feel like that's a sloppy solution. Does anyone know of a better way to solve this problem?

Answer 1

一个OPTION将创建代码snippet，因此如果您键入元素，它将在完整的HTML中展开，片段可用于崇高文本，原子文本编辑器。

另一个简单的选择是使用emmet，它在前面提到的两个和括号中可用，如下所示：

.row>.col.s12>element TAB

Answer 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 ..

Repeated row/col code with css grid framework

2 个答案: