Question

我正在尝试显示pagesize = 3的列表视图。但是，以某种方式在其他页面上的分页位置并不平行。下面是图片：

应该是这样的：

最后一页变成这样，因为它只有一张专辑而不是3张专辑。

下面是我的编码：

查看（index.php）：

<div class="gallery-index">
<?php 
        //modal
        Modal::begin([
            'header' => '<h4>Setting</h4>',
            //'footer' => Html::submitButton('Save', ['class' => 'btn btn-success']). ' ',
            'toggleButton' => [
                'label' => '<i class="glyphicon glyphicon-cog"></i>',
                'class' => 'btn btn-default'
            ],
        ]);

        echo $this->render('_formSetting', [
            'model' => $model,
        ]);


        Modal::end();


        //listview        
    echo \yii\widgets\ListView::widget([
        'id' => 'gallery-listview',
        'dataProvider' => $dataProvider,
        //'layout' => "{items}\n{pager}\n{summary}",
        'layout'=>'{items}{pager}',
        'itemView' => function ($model) {
            return $this->render('_galleryItem',['model' => $model]);
        },
        'pager' => [
            'firstPageLabel' => 'First',
            'lastPageLabel' => 'Last',
            'nextPageLabel' => '>>',
            'prevPageLabel' => '<<',
        ],

    ]);

    ?>

    <div>

查看（_galleryItem.php）

<div class="col-sm-4 gallery-item">
<div class="image">
  <div class="case-study-gallery">
    <h1 class="title"><?= $model->name ?></h1>
    <p style="text-align:justify" ><?= $model->descr ?></p><br>
  <div class="case-study study1">
    <figure>
      <!--<img class="case-study__img" src="https://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />-->
    </figure>
    <div class="case-study__overlay">
      <h2 class="case-study__title"><?= $model->name; ?></h2>
      <!--<a class="case-study__link" href="#">View photos</a>-->
      <?= Html::a('View photos', ['view', 'id' => $model->gallery_id], ['class' => 'case-study__link']) ?>
    </div>
  </div>
</div>

Answer 1

应用此CSS并将其居中。

.pagination {
     margin: 20px auto 50px;
     text-align: center;
     overflow: hidden;
}

Answer 2

设置分页边距时，自动设置为。这样您就可以在所有页面上看到相同的位置。如果您使用的是引导程序https://www.w3schools.com/Css/css3_pagination.asp

，请参考此链接https://www.w3schools.com/bootstrap/bootstrap_pagination.asp

分页位置不固定（Yii2）

2 个答案: