并排面板指令

时间:2014-04-25 19:51:56

标签: angularjs twitter-bootstrap angularjs-directive

我有一个Angular JS指令,它遍历一些分组数据并根据分组创建面板。我很难将这些面板分成两组。我已经尝试编辑col-lg-6的位置和值,甚至还添加了一些应该完成任务的常规CSS。有人可以查看http://plnkr.co/edit/cNFNAU?p=info的基本代码并提供任何有用的反馈吗?

2 个答案:

答案 0 :(得分:3)

style.css中,有一条规则......

margin: 10px;

因为col-lg-6基本上将元素的宽度设置为50%...当添加边距时,2 col-lg-6的宽度大于100%并且不能适合一行。删除边距,它应该工作。

要重新添加边距,您需要使用样式或布局,请注意不要向col-lg-6元素添加正水平边距。

这里是修复(将lg更改为xs,因此它在plunker中正确显示)... Plunker

答案 1 :(得分:1)

在我看来,你可以通过两种方式做到这一点。

简单的方法是在div上使用float left样式,但当面板高度不匹配时,你最终会得到空格。见plunker

另一种方法是在你的指令中创建div,并在一侧堆叠面板,在另一面堆叠奇数面板。见plunker