更改引导折叠小部件的标题大小 - Yii 2.0答案

【问题标题】：Change Header Size of Boostrap Collapse Widget - Yii 2.0更改引导折叠小部件的标题大小 - Yii 2.0
【发布时间】：2015-09-15 13:56:19
【问题描述】：

谁能告诉我如何在 Yii 2.0 中更改折叠小部件标题的高度。现在好像是 40px，我想把它变成 20px。小部件渲染的容器 div 具有类 .panel 和 .panel-default 和 .panel-collapse，但我不确定是否有可以直接在折叠小部件中设置的选项，或者我是否必须覆盖不知何故CSS？这是小部件的基本代码（'options' 设置仅适用于正文内容而不适用于标题）。

echo Collapse::widget([

        'items' => [

                [
                        'label' => $mycollapseheader,
                        'content' => $contentstring,
                        'encode' => false,
                        //'options' => ['style' => 'background:black'],
                        //'contentOptions' => [],
                ],

        ]
]);

【问题讨论】：

标签： php yii twitter-bootstrap-3 yii2

【解决方案1】：

正如您从 Collapse 小部件的 source code 中看到的那样 - 无法直接更改标题宽度。

您有两种解决问题的方法 - 首先修改小部件（查看具有 headerHtmlOptions 的 TbGridView 小部件）。所以你可以使用这样的东西：

'headerHtmlOptions' => array(
    'style' => 'width:30px;'
)

第二种方法是根据 Javascript 更改宽度的值。

希望对你有帮助。

【讨论】：

【解决方案2】：

谢谢Bfcm！我没有想到 javascript 选项。事实证明，这是覆盖 .panel-heading 类的顶部和底部填充的问题。

$(document).ready(function(){
  $( '.panel-heading').each(function(){

   $( this ).css({'padding':'0px 20px 0px 20px'});

  });
});

【讨论】：

【解决方案3】：

我改变了折叠小部件中的标题设计，如下所示：

<?php   echo Collapse::widget([

        'encodeLabels' => false,
        'items' => [
            // equivalent to the above
            [
                'label' => '<span class="myclass">MyHeader:</span>',
                'content' => $this->render('_mycollapse', ['model' => $model]) ,
                // open its content by default
                //'contentOptions' => ['class' => 'in']
            ],

        ]
    ]);
    ?>

请注意，如果 Header 不是由客户端设置，则 encodeLabels 参数很有用。所以你现在可以在你的“style.css”中设置“myclass”的样式

【讨论】：