如何设置下拉菜单和下拉菜单的高度和宽度?

时间:2018-06-14 19:28:47

标签: bootstrap-4

我无法使用我的下拉DROP UP,我想缩小宽度以卡在下面的按钮上..我已经尝试使用w-100 h-100 ,!重要的没有风格,但没有任何作用!

我正在使用BOOSTRAP 4.1.1!

CODE:

<main>
    <section>
        <aside>
            <div class="container-fluid fixed-bottom mb-5 pb-4">
                <div class="row">
                    <!-- Floor do Mapa -->
                    <div class="col-6" style="background-color: blue;">
                        <div class="btn-group dropup">
                            <button type="button" class="btn bg-white custom-border-rounded dropdown-toggle mt-5 ml-5 shadow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="z-index: 4;"><i class="mapflooricon- aliansce-text-grey"></i></button>
                            <div class="dropdown-menu rounded ml-2 pb-5 show shadow" x-placement="top-start" style="z-index:auto; will-change: transform; top: 0px; left: 0px; transform: translate3d(1px, -175px, 0px);background-color: rgba(51,51,51, 0.3);" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item text-white" href="#">P2</a>
                                <a class="dropdown-item text-white" href="#">P1</a>
                                <a class="dropdown-item text-white" href="#">P0</a>
                                <a class="dropdown-item text-white active" href="#">0</a>
                                <a class="dropdown-item text-white" href="#">1</a>
                            </div>
                        </div>
                    </div>

                    <!-- Legenda do Mapa -->
                    <div class="col-6" style="background-color: red;">
                        <div class="card float-right" style="position: relative; z-index: 4;">
                             <div class="card-body">
                                 <div class="d-inline-flex">
                                     <div class="bg-primary mr-2 pr-4 pl-4 p-2 rounded"><span>vacância</span></div>
                                     <div class="aliansce-bg-grey mr-2 pr-4 pl-4 p-2 rounded"><span>alocada</span></div>
                                     <div class="bg-danger p-2 rounded"><span>inadimplencia</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </section>
</main>

enter image description here

0 个答案:

没有答案