Question

我想让我的下拉列表的位置成为中心。但是当我做了

align="center"

该位置不在中心

这是我的代码：

<?php

/* @var $this yii\web\View */



$this->title = 'Beranda - Pascasarjana Dalam Angka';
?>
<div class="site-index">

    <div class="jumbotron">
        <h1>Selamat Datang!</h1>

        <p class="lead-lg-5">Aplikasi ini ditujukan untuk menampilkan <br>data-data dan statistik mahasiswa program Pascasarjana Universitas</p>


    <div align="center" class="body-content">


    <div align="center" class="dropdown">
        <button align="center" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Pilih Tahun Periode
            <span class="caret"></span>
        </button>
                <ul align="center" class="dropdown-menu">
                    <li><a href="#">Periode 2001-2005</a></li>
                    <li><a href="#">Periode 2006-2010</a></li>
                    <li><a href="#">Periode 2011-2015</a></li>
                </ul>
    </div>



    </div>


    </div>

</div>

结果如下：

我可以这样做，列表可能在中心？提前致谢

Answer 1

将下拉放入div中，然后使用CSS Ex：

将该潜水对齐以显示在中心

/* centers the form div to the screen */
#divCenter{
    position:absolute;
    width:800px;
    top:50%;
    left:50%;
    margin-top:-180px;
    margin-left:-410px;
    z-index:15;
    border-radius: 10px;
}

Answer 2

将位置相对属性应用于父级，并将绝对位置设置为下拉元素包装。

.dropdown {
  position: relative;
}

.dropdown .dropdown-menu {
  position: absolute;
  top: 50px;
  width: 100%;
}

希望这有帮助。

Answer 3

我的建议：使用yii2内置的bootstrap类！以下是视图文件的工作示例。 Short anwer：您必须将下拉机制放在.btn-group

中

<?php
use yii\helpers\Url;
use yii\helpers\Html;
use yii\bootstrap\Dropdown;
/* @var $this yii\web\View */

?>
<div class="site-index">

    <div class="jumbotron">
        <h1>Selamat Datang!</h1>
        <p class="lead-lg-5">
            Aplikasi ini ditujukan untuk menampilkan <br>
            data-data dan statistik mahasiswa program Pascasarjana Universitas
        </p>
    </div>
    <div class="col-md-12 school-options-dropdown text-center">
        <div class="dropdown btn-group">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Pilih Tahun Periode <b class="caret"></b></a>
            <?php
                echo Dropdown::widget([
                    'items' => [
                        ['label' => 'Periode 2001-2005', 'url' => '#'],
                        ['label' => 'Periode 2001-2005', 'url' => '#'],
                        ['label' => 'Periode 2001-2005', 'url' => '#'],

                    ],
                ]);
            ?>
        </div>
    </div>
</div>

为什么我的下拉列表不能位于中心位置？

3 个答案: