Question

任何人都可以告诉我如何在Yii 2.0中更改我的折叠小部件标题的高度。它现在就像是40px，我希望它能达到20px。使用类.panel和.panel-default以及.panel-collapse呈现窗口小部件的容器div，但我不确定是否有可以直接在折叠窗口小部件中设置的选项或如果我不得不以某种方式覆盖CSS？以下是窗口小部件的基本代码（“options”设置仅适用于正文内容而非标题。）

echo Collapse::widget([

        'items' => [

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

        ]
]);

Answer 1

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

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

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

第二种方法是更改每个Javascript的宽度值。

我希望它会对你有所帮助。

Answer 2

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

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

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

  });
});

Answer 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']
            ],

        ]
    ]);
    ?>

请注意，如果客户端未设置标题，encodeLabels参数将很有用。这样您就可以在“ style.css”中为“ myclass”设置样式

更改Boostrap折叠小部件的标题大小 - Yii 2.0

3 个答案: