如何使Yii2 GridView具有响应式设计？

Question

我有一个在Yii2中常规的GridView。

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'tableOptions' => ['class' => 'table table-striped table-bordered table-responsive'],
        'columns' => [
              'firstName',
              'lastName',   
              [
                 'attribute' => 'verified',
                 'format' => 'html',
                 'value' => function($data){  
                      ....
                  }
              ],
         ]
]); ?>

在移动设备上，GridView 不具备响应式设计。如何使 GridView 页面具备响应式设计？

- Beginner

Answer 1

根据Bootstrap文档所述：

通过将任何 .table 包裹在 .table-responsive 中，创建响应式表格。

因此，只需将您的小部件包裹在中。

<div class="table-responsive">
// GridView here
</div>

- Bizley

Answer 2

这里是正确的选项。

<?= GridView::widget([
'tableOptions' => [
    'class' => 'table table-striped',
],
'options' => [
    'class' => 'table-responsive',
],
'dataProvider' => $dataProvider,

- Forest