请参阅示例代码http://codepen.io/anon/pen/mJuaL
我正在嵌套列表元素中呈现层次结构数据。我将浏览器的默认缩进用于列表,以便于查看层次结构。我喜欢保持这种方式(我可以使用CSS重置,然后重新应用)。但是我喜欢将右侧的按钮垂直对齐(垂直查看时按钮之间没有移位)。简单的CSS是否有可能。我使用引导程序作为框架。
代码:(我用玉避免重复)
oh_counties = [{name: "Franklin", zips:[111,222,333,444,555]},{name: "Adams", zips: [111,222,333,444]},{name: "Allen", zips: [111,222,333]}]
wi_counties = [{name: "Dane", zips: [111]}, {name: "Adams", zips: [111,222,333,444]} ]
states = [{name: "OH", counties: oh_counties},{name: "WI", counties: wi_counties},]
mixin row(data)
.row
.col-lg-9
if data.name
| #{data.name}
else
| #{data}
.col-lg-3
button.btn.btn-default.btn-sm(type="button")
| test
ul
for st in states
li
+row(st)
ul
for c in st.counties
li
+row(c)
ul
for z in c.zips
li
+row(z)
最佳答案
我能够重组您的row()
mixin并实现您的期望。
mixin row(data)
.row
.col-lg-12
if data.name
| #{data.name}
else
| #{data}
.pull-right
button.btn.btn-default.btn-sm(type="button")
| test
更新的Codepen:http://codepen.io/anon/pen/jervf