请参阅示例代码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

10-05 20:42
查看更多