如何在 Yii2 的新行中放置一个列表视图的分页器

Question

我有一个与yii2集成的主题，当使用列表视图的分页器时，我在添加到列表视图项的div旁边有分页器，我需要单独将分页器放在一个新行中。我使用了以下视图：

    <style>
    #items {

    }
</style>
<?php

use yii\web\View;
use yii\widgets\LinkPager;
use yii\widgets\ListView;

//This is a php syntax to write register scripts
$this->registerJs("m_active='bio'", View::POS_END);
?>
<div class=" container">


    <div class="app-alem-form">

    </div>


</div>
<div id="bio" class="section bg1">
    <div class="head color2">
        <div class="title">سيرة العلماء</div> <i class="icon fa fa-graduation-cap"></i>
    </div>
    <div class="container flex1">
        <!--<div class="container container-fluid row" id="items">-->
        <!--<div class="row" id="items">-->

        <?=
        ListView::widget([
            'dataProvider' => $listDataProvider,
            'options' => [
                'tag' => 'div',
                'class' => 'list-wrapper',
                'id' => 'list-wrapper',
            ],
            'layout' => '{items}{pager}{summary}',
            'layout' => "{summary}\n{items}\n{pager}",
            'itemView' => function ($model, $key, $index, $widget) {
        echo ("<div class='item-holder')>
            <a href = '?r=alem%2Fget-olama&id=" . $model->attributes['id'] . "'>
                    <div class='item'>
                    <div class='default cover' style='background:url(img/olama/" . $model['c_image'] . "); background-size:contain;'></div>
                    <div class='title'>" . $model->attributes['c_name'] . "</div>
                                        </div>
                                        </a>
                    </div>");
    },
            'pager' => [
                'firstPageLabel' => 'first',
                'lastPageLabel' => 'last',
                'nextPageLabel' => '>>',
                'prevPageLabel' => '<<',
                'maxButtonCount' => 3,
            ],
        ]);
        ?>
    </div>

</div>

与此页面相关的我的风格部分 sheet 如下：

#main .bio .container .item-holder {
    padding:10px;
    width:calc(100% / 4);
    display:table;
    /*    display: inline;*/
}
#main .bio .container .item-holder .item {
    background:#fff;
    border:1px solid #aaa;
    padding:10px;
}
#main .bio .container .item-holder .item .cover {
    width:100%;
    height:200px;
    border:1px double #aaa;
}
#main .bio .container .item-holder .item .title {
    text-align:center;
}
/*Site Main End*/
#bio .container {
    flex-direction:row-reverse;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
}
#bio .container .item-holder {
    padding:10px;
    width:calc(100% / 4);
}
#bio .container .item-holder .item {
    background:#fff;
    padding:10px;
}
#bio .container .item-holder .item .cover {
    width:100%;
    height:200px;
    border:1px double #aaa;
}
#bio .container .item-holder .item .title {
    text-align:center;
}
@media (max-width: 900px) { 
    #bio .container .item-holder {
        padding:10px;
        width:calc(100% / 2);
    }
}
@media (max-width: 600px) { 
    #bio .container .item-holder {
        padding:10px;
        width:calc(100% / 1);
    }
}

完整样式sheet如下：

    @font-face {
    font-family: tahoma;
    src: url(../fonts/Tahoma.ttf);
}
@font-face {
    font-family: droudKufi;
    src: url(../fonts/DroidKufi-Regular.ttf);
}
/* Site Fonts End*/
body {
    margin:0;
    overflow:auto;
    font-family:droudKufi, arial;
    background:#eee;
}
form {
    margin:0;
}
input, textarea, select {
    outline:none;
    font-family:inherit;
    transition:ease 0.3s all;
    width:100%;
    padding:3px 7px;
    border:1px solid #aaa;
    direction:rtl;
    border-radius:5px;
}
input:focus, textarea:focus, select:focus {
    border-color:#32aae1 !important;
    box-shadow: 0px 0px 7px rgba(81, 203, 238, 1);; 
}
textarea {
    resize:none;
}
button {
    outline:none;
    font-family:inherit;
    cursor:pointer;
    transition:ease 0.3s all;
    border:1px solid #aaa;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 16px;
}
div {
    box-sizing:border-box;
}
a {
    text-decoration:none;
}
a {
    color:inherit;
}
.container { margin-right: auto; margin-left: auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 901px) {.container { width: 870px; }}
@media (min-width: 992px) { .container { width: 980px; }}
@media (min-width: 1200px) { .container { width: 1180px; }}
.color1 {
    color:#296E9D;
}
.color2 {
    color:#ED2024;
}
.default {
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:initial;
    background:url(../img/logo.png) #fff;
}
.shadow-box {
    position:fixed;
    width:100vw;
    height:100vh;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    top:0;
    left:0;
    display:none;
}
.shadow-box .container {
    z-index:99999;
}

.shadow-box .overlay {
    position:absolute;
    background:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.section {
    padding:40px 0;
    text-align:center;
    width:100%;
}
.section.bg1 {
    background:#fff;
}
.section.bg2 {
    background:#296E9D;
}
.section .container.flex1 {
    display:flex;
    align-items:center;
    justify-content:center;
}
.section .container.flex2 {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column
}
.section .btn1, .section .btn2:hover {
    color:#296E9D;
    background:#fff;
}
.section .btn1, .section .btn2 {
    margin-top:20px;
}

.section .btn2, .section .btn1:hover {
    color:#fff;
    background:#296E9D;
}
.section .head {
    margin-bottom:30px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.section .head.color1 {
    color:#fff;
}
.section .head.color2 {
    color:#296E9D;
}
.section .head .title {
    font-size:38px;
}
.section  .head .icon {
    font-size:40px;
    margin-left:20px;
}
.pagination-holder {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:20px;
    width:100%;
}
.pagination-holder .item {
    height:40px !important;
    width:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 5px;
    border-radius:10px;
    cursor:pointer;
    color:#296E9D;
    background:#fff;
    transition:ease 0.3s all;
    border:1px solid #aaa;
}
.pagination-holder .item.active {
    color:#fff;
    background:#296E9D;
    text-shadow:0 0 10px #fff;
}
.pagination-holder .item:hover {
    color:#fff;
    background:#296E9D;
}
/*Site Header Start*/
#site-header {
    width:100%;
    padding:10px 0;
    background:#fff;
    z-index:9999999;
    border-bottom:1px solid #ddd;
}
#site-header .menu-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
#site-header .menu-bar .logo {
    display:flex;
    align-items:center;
}
#site-header .menu-bar .logo img{
    height:40px;
    margin-right:10px;
}
#site-header .menu-bar .logo .text {
    font-size:22px;
    font-weight:bold;
}
#site-header .menu-bar .logo .text span {
}

#site-header .menu-bar .menu {
    display:flex;
    align-items:center;
    font-size:16px;
    flex-direction:row-reverse;
}
#site-header .menu-bar .menu .item {
    transition:ease 0.3s all;
    border-radius:10px;
    color:#296E9D;
    position:relative;
}
#site-header .menu-bar .menu .item a {
    padding:5px 10px;
    display:flex;
    align-items:center;
    flex-direction:row-reverse;
}
#site-header .menu-bar .menu .item .icon {
    font-size:10px;
    margin-right:10px;
}
#site-header .menu-bar .menu .item:hover {
    color:#ED2024;
}
#site-header .menu-bar .menu .item.active {
    color:#fff;
    background:#296E9D;
    text-shadow: 0 0 20px #fff; 
}
#site-header .menu-bar .menu .item:hover .sub-menu {
    display:block;
}
#site-header .menu-bar .menu .item .sub-menu {
    position:absolute;
    top:100%;
    right:0;
    width:200px;
    background:#fff;
    text-align:right;
    border:1px solid #ddd;
    display:none;
    transition:ease 0.3s all;
    z-index: 9;
}
#site-header .menu-bar .menu .item .sub-menu .item {
    border-radius:0;
    border:0;
    border-bottom:1px solid #ddd;
}
#site-header .menu-bar .mobile-menu {
    display:none;
    cursor:pointer;
    position:relative;
    text-align:right;
}
#site-header .menu-bar  .mobile-nav {
    display:none;
    position:absolute;
    top:63px;
    height:calc(100vh - 62px);
    width:300px;
    background:#fff;
    right:0;
    overflow-y:auto;
    border-left:1px solid #ddd;
}
#site-header .menu-bar  .mobile-nav .sub-menu {
    display:none;
    background:#f1f1f1;
}
#site-header .menu-bar .mobile-menu:hover {
    color:#296E9D;
}
#site-header .menu-bar .mobile-menu.active {
    color:#ED2024;
}
#site-header .menu-bar .mobile-nav .item {
    padding:10px;
    transition:ease 0.3s all;
    border-bottom:1px solid #ddd;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction:row-reverse;
    color:#296E9D;
    cursor:pointer;
}
#site-header .menu-bar .mobile-nav .item:hover {
    color:#ED2024;
}
#site-header .menu-bar .mobile-nav .item.active {
    color:#fff;
    background:#296E9D;
    text-shadow: 0 0 20px #fff; 
}
@media (max-width: 900px) {
    #site-header .menu-bar .menu {
        display:none;
    }
    #site-header .menu-bar .mobile-menu {
        display:block;
    }
    #site-header {
        position:fixed;
        top:0;
        left:0;
    }
    .header-space {
        margin-top:62px;
    }
}

/*Site Header End*/

/*Site Main Start*/

#main .top-carousel {
    width:100%;
    height:425px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}
#main .top-carousel .slider1 {
    padding:0 100px;
}
#main .top-carousel .slider1 .item img {
    width:100%;
    height:200px;
}
#main .top-carousel .slider1 .item .text {
    text-align:center;
    height:59px;
    overflow:hidden;
    font-size:14px;
    background:#fff;
    border:1px solid #ddd;
    padding:0 5px;
}
#main .slider1 .owl-prev, .slider1 .owl-next {
    top:50%;
    transform:translateY(-64%);
    position:absolute;
    background:transparent !important;
    transition:all ease 0.3s;
}
#main .slider1 .owl-prev {
    left:0;
    margin-left:10px;
}
#main .slider1 .owl-next { 
    right:0;
    margin-right:10px;
}
#main .slider1 .owl-prev:after, .slider1 .owl-next:after {
    font-family: "FontAwesome";
    font-size: 148px;
    color:#D3D3D3;
    font-weight:bold;
    cursor:pointer;
}

#main .slider1 .owl-prev:after {
    content: '\f104';
}
#main .slider1 .owl-next:after {
    content: '\f105';
}
#main .qanda .carousel {
    max-width:100%;
}
@media (max-width: 900px) { 
    #main .top-carousel .slider1 {
        padding:0 70px;
    }
}
#main .qanda .slider2 .item {
    text-align:center;
    font-size:16px;
    margin-bottom:10px;
    direction:rtl;
}
#main .qanda .slider2 .item .title {
    font-weight:bold;
    color:#fff;
    margin-bottom:20px;
}
#main .qanda .slider2 .item .desc {
    color:#aaa;
}
#main .qanda button {
    margin-top:40px !important;
}

#main .shadow-box .container .form-holder {
    background:#fff;
    border:2px solid #296E9D;
    border-radius:8px;
    padding:20px;
}
#main .shadow-box .form-holder .title {
    text-align:right;
    margin-bottom:10px;
    direction:rtl;
}
#main .shadow-box .form-holder form input, .shadow-box .form-holder form textarea {
    margin-bottom:5px;
}
#main .shadow-box .form-holder form textarea {
    height:90px;
}
#main .shadow-box .form-holder form .btn {
    color:#296E9D;
    background:#fff;
}
#main .shadow-box .form-holder form .btn:hover {
    background:#296E9D;
    color:#fff;
}
#main .books .container {
    flex-wrap:wrap;
}
#main .books .item-holder {
    padding:10px;
    width:calc(100% / 2);
}
#main .books .item {
    height:233px;
    display:flex;
    flex-direction:row-reverse;
    border:1px solid #aaa;
    float:right;
}
#main .books .item .cover {
    height:100%;
    width:200px;
    flex-shrink:0;
    float:right;
}
#main .books .item .info {
    padding:10px;
    display:flex;
    flex-align:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    direction:rtl;
}
#main .books .item .info .title {
    font-size:20px;
    font-weight:bold;
}
@media (max-width: 900px) { 
    #main .books .item-holder {
        width:calc(100% / 1);
    }
}

#main .bio .container .item-holder {
    padding:10px;
    width:calc(100% / 4);
    display:table;
    /*    display: inline;*/
}
#main .bio .container .item-holder .item {
    background:#fff;
    border:1px solid #aaa;
    padding:10px;
}
#main .bio .container .item-holder .item .cover {
    width:100%;
    height:200px;
    border:1px double #aaa;
}
#main .bio .container .item-holder .item .title {
    text-align:center;
}
/*Site Main End*/

/*Site About Start*/

#about {

}
#about .container .img {
    height:200px;
    width:200px;
    float:left;
    margin-right:10px;
}
#about .container .text {
    text-align:right;
    color:#000;
    direction:rtl;
}
/*Site About End*/

/*Site Mag Start*/
#mag .container {
    flex-wrap:wrap;
}
#mag .item-holder {
    padding:10px;
    width:calc(100% / 2);
}
#mag .item {
    height:233px;
    display:flex;
    flex-direction:row-reverse;
    border:1px solid #aaa;
}
#mag .item .cover {
    height:100%;
    width:200px;
    flex-shrink:0;
}
#mag .item .info {
    padding:10px;
    display:flex;
    flex-align:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    direction:rtl;
}
#mag .item .info .title {
    font-size:20px;
    font-weight:bold;
}


@media (max-width: 900px) {
    #mag .item-holder {
        width:calc(100% / 1);
    }
}
/*Site Mag End*/

/*Site Library Start*/
#library .container {
    flex-wrap:wrap;
}
#library .item-holder {
    padding:10px;
    width:calc(100% / 2);
}

#library .item {
    height:233px;
    display:flex;
    flex-direction:row-reverse;
    border:1px solid #aaa;
}
#library .item .cover {
    height:100%;
    width:200px;
    flex-shrink:0;
}

#library .item .info {
    padding:10px;
    display:flex;
    flex-align:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    direction:rtl;
}
#library .item .info .title {
    font-size:20px;
    font-weight:bold;
}

@media (max-width: 900px) {
    #library .item-holder {
        width:calc(100% / 1);
    }
}
/*Site Library End*/


/*Site Bio Start*/
#bio .container {
    flex-direction:row-reverse;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
}
#bio .container .item-holder {
    padding:10px;
    width:calc(100% / 4);
}
#bio .container .item-holder .item {
    background:#fff;
    padding:10px;
}
#bio .container .item-holder .item .cover {
    width:100%;
    height:200px;
    border:1px double #aaa;
}
#bio .container .item-holder .item .title {
    text-align:center;
}
@media (max-width: 900px) { 
    #bio .container .item-holder {
        padding:10px;
        width:calc(100% / 2);
    }
}
@media (max-width: 600px) { 
    #bio .container .item-holder {
        padding:10px;
        width:calc(100% / 1);
    }
}
/*Site Bio End*/

/*Site Activities Start*/
#activities .container {
    flex-direction:row-reverse;
    align-items:flex-start;
    justify-content:flex-start;
    flex-wrap:wrap;
}
#activities .container .item-holder {
    width:calc(100% / 2);
    font-size:18px;
    padding:10px;
}
#activities .container .item-holder .item {
    text-align:right;
    padding:10px;
}
#activities .container .item-holder .item .title {
    font-weight:bold;
    max-height:68px;
    overflow:hidden;
    margin-bottom:5px;
}
#activities .container .item-holder .item .desc {
    max-height:100px;
    overflow:hidden;
}
#activities .container .item .img {
    width:100%;
    height:250px;
}
@media (max-width: 900px) { 
    #activities .container .item-holder {
        width:calc(100% / 1);
    }
}
/*Site Activities End*/

/*Site Question Start*/
#question .container .text {
    text-align:right;
    margin-bottom:10px;
    direction:rtl;
}
#question .form-holder {
    text-align:left;
}
#question .form-holder .row {
    display:flex;
    flex-direction:row-reverse;
}
#question .form-holder .row .item {
    width:calc(100% / 2);
    margin-bottom:10px;
}
#question .form-holder .row .item:nth-of-type(1) {
    padding-left:5px;
}
#question .form-holder .row .item:nth-of-type(2) {
    padding-right:5px;
}
#question .form-holder textarea {
    width:100%;
    height:150px;
    margin-bottom:10px;
}
#question .form-holder .btn {
    color:#296E9D;
    background:#fff;
}
#question .form-holder .btn:hover {
    color:#fff;
    background:#296E9D;
}
/*Site Question End*/

/*Site Rulings Start*/
#rulings .container .item-holder {
    width:100%; 
    margin-bottom:10px;
}
#rulings .container .item-holder .item {
    border:1px solid #aaa;
    text-align:right;
    padding:10px;
    direction:rtl;

}
#rulings .container .item-holder .item .title {
    font-weight:bold;
    margin-bottom:5px;
}
/*Site Rulings End*/

/*Site Footer Start*/
#site-footer {
    padding:10px 0;
    background:#fff;
    border-top:1px solid #ddd;
}
#site-footer .container {
    display:flex;
    align-items:center;
}
#site-footer .container > div {
    width:calc(100% / 2);
}
#site-footer .text {
    color:#296E9D;
    font-size:14px;
    text-align:left;
}
#site-footer .social {
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
#site-footer .social .icon {
    color:#296E9D;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    cursor:pointer;
    margin-left:20px;
    transition:ease 0.3s all;
}
#site-footer .social .icon:hover {
    color:#ED2024;
}



/*Site Footer End*/

Answer 1

您在 ListView 的配置中提到了两次布局。使用 'layout' => '{items}<div>{pager}</div>{summary}'

A div 默认有 display: block;。此外，如果仍然不起作用，您可以给它class 行。

如何在 Yii2 的新行中放置一个列表视图的分页器

How to put pager of a listview in a new line in Yii2

css

listview

yii2

yii2-widget