更改标题大小的Boostrap崩溃小部件- Yii 2.0 - Change Header Size of Boostrap Collapse Widget - Yii 2.0

Change Header Size of Boostrap Collapse Widget - Yii 2.0

本文关键字：小部 Yii 崩溃 Boostrap 标题 | 更新日期: 2023-09-27

谁能告诉我如何在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' => [],
                ],
        ]
]);

您可以从崩溃小部件的源代码中看到-没有办法直接更改标题宽度。

您有两种方法来解决这个问题——首先修改Widget(看看具有headerHtmlOptions的TbGridView Widget)。你可以这样写:

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

第二种方法是修改每个Javascript的width值。

希望对你有帮助。

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

$(document).ready(function(){
  $( '.panel-heading').each(function(){
   $( this ).css({'padding':'0px 20px 0px 20px'});
  });
});

我更改了折叠部件的页眉设计，如下所示:

<?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的样式