Question

请参阅示例代码http://codepen.io/anon/pen/mJuaL

我在嵌套列表元素中渲染分层数据。我使用浏览器默认缩进列表，以便很容易看到层次结构。我喜欢这样保持它（我可以使用css reset，并重新应用）。但是我喜欢让右边的按钮垂直对齐（这意味着当垂直观看时按钮之间没有移动）。有可能用简单的CSS。我使用bootstrap作为我的框架。

代码:(我用Jade来避免重复）

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)

Answer 1

我能够重构你的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

垂直对齐列表元素

1 个答案: