在Yii2的DetailView中设置列宽/分布的是什么？

Question

相同的视图，相同的DetailView，相同的代码，不同的模型，不同的最终结果：

在这种情况下，列宽是多少？为什么它随着每条记录而变化？这是Bootstrap还是Yii2问题？我试图用Chrome Dev Tools分析生成的代码，但没有得出任何结论。如您所见，两列中都有很多空格，因此不应出现列宽移位。

最重要的 - 如何预防？如何确保每个视图看起来都完全一样，无论在DetailView内打印什么数据？

Answer 1

标题中的问题答案（在Yii2的DetailView中设置列宽/分布是什么？）是“我不知道”或“ Nothing sets此”。但是，添加这些行：

table.detail-view th {
    width: 25%;
}

table.detail-view td {
    width: 75%;
}

到site.css是解决此问题的众多方法之一。

Answer 2

.fix-width > tbody > tr > th {
    width: 20%;
}

echo DetailView::widget([
    'options' => ['class' => 'table table-striped table-bordered detail-view fix-width'],
    'model' => $model,
    'attributes' =>[],
]);

Answer 3

您还可以使用公共template来实现这一目标。例如：

<?= DetailView::widget([
   'model' => ...,
   'attributes' => [[...], [...]],
   'template' => "<tr><th style='width: 15%;'>{label}</th><td>{value}.</td></tr>"
]) ?>

在这种情况下，我有两列将第一个列的宽度强制为总数的15％。

您还可以使用这种方法为生成的表应用更多样式。

Answer 4

正确答案是内容的宽度。如果您仔细查看内容的不同内容，请仔细查看。别名标签列和值列的宽度不同。在这种情况下，宽度由窗口小部件自动管理。您可以通过css

设置它们