如何用dl-horizo​​ntal修复这个水平溢出？

Question

也许我做错了什么，但结果很糟糕：

请注意ng-click="grid.appScope.myControllerFn(row.entity)的文字如何超出小组的边界 我需要显示两个宽度相同的面板，并且每个面板内部都有dl and dd of bootstrap水平显示的两个属性。

Here is the bootply example

Value 2

如何修复此水平溢出？我做错了吗？ 我的例子看起来标准。我做了什么，Bootstrap不支持？

Answer 1

所以，你可以覆盖bootstrap dt width和dd margin-left，它们只适用于180px。

.dl-horizontal dt {
    width: 80px;
}

.dl-horizontal dd {
    margin-left: 90px;
}

http://www.bootply.com/SnawhTGbvU

修改

http://www.bootply.com/mg7mkR303W

只需移除包裹div.col-md-6的{​​{1}}即可。您也可以将所有dl个项目保留在一个dl

中

Answer 2

Codepen http://codepen.io/noobskie/pen/PPQZjv

你在找这样的东西吗？

默认情况下，bootstrap会为dd元素添加边距，所以我只应用以下css来重置

.dl-horizontal dd{
  margin-left:0;
}
.dl-horizontal dt{
  text-align: left; //Align title with content
}

Answer 3

http://www.bootply.com/aAXea5CY2E

所有问题都是因为您的块宽度很小。