Yii2 的 DetailView 中的列宽/分布是什么？答案

【问题标题】：What sets column width / distribution in Yii2's DetailView?Yii2 的 DetailView 中的列宽/分布是什么？
【发布时间】：2015-06-29 08:27:20
【问题描述】：

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

在这种情况下，什么设置列宽？为什么每张唱片都在变化？这是 Bootstrap 还是 Yii2 问题？我尝试使用 Chrome 开发工具分析生成的代码，但没有得出任何结论。如您所见，两列中都有很多空格，因此不应发生列宽偏移。

最重要的是——如何防止这种情况发生？无论DetailView内部打印什么数据，如何确保每个视图看起来都完全相同？

【问题讨论】：

标签： css twitter-bootstrap yii yii2 detailview

【解决方案1】：

您也可以使用公共属性template 来实现此目的。例如：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

到site.css 是“解决”这个问题的众多方法之一。

【讨论】：

【解决方案3】：

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

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

【讨论】：

我很乐意接受您的回答，但您必须提供一些解释文本。将这些样式和代码放在哪里，以及为什么您决定完全使用该代码，而不是其他代码。一般来说，Stack Exchange 或 Stack Overflow 不欢迎仅包含代码示例、甚至没有微小解释文本的答案，而且您很容易因为这个事实而让您的好答案被否决。

【解决方案4】：

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

【讨论】：