增加引导程序下拉菜单宽度 [英] Increase bootstrap dropdown menu width

问题描述

想知道是否有人对增加下拉宽度有任何建议吗?

wondering if anyone has any tips on how to increase the dropdown width?

我有一行，其中包含两列，并带有一些JavaScript，可以在选择时上下滑动下拉列表.我遇到的问题是我似乎无法弄清楚如何在选择时增加下拉菜单宽度，理想情况下，下拉菜单将与列大小匹配.但是发生的事情是，下拉宽度仅与下拉菜单中的文本大小相同，是否有人建议如何增加下拉宽度以匹配列大小?

I have a row containing two columns with a a bit of javascript that slides the dropdown up and down when selected. The problem I am having is that I can't seem to figure how to increase the dropdown width when selected, ideally the dropdown would match the column size. But what is happening is that the dropdown width is only the same size as the text within the dropdown does anyone have a suggestion on how to increase the dropdown width to match the column size?

<div class="row question">
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                First column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                </ul>
            </div>
        </div><!-- end of the dropdown -->
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                second column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                </ul>
            </div>
        </div>
    </div><!--end of the row question -->

<script>
     // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    // ADD SLIDEUP ANIMATION TO DROPDOWN //
    $('.dropdown').on('hide.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
    });
</script>

推荐答案

添加以下CSS类

.dropdown-menu {
    width: 300px !important;
    height: 400px !important;
}

当然，您可以使用满足您需求的东西.

Of course you can use what matches your need.

这篇关于增加引导程序下拉菜单宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！