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

问题描述

想知道是否有人有任何关于如何增加下拉宽度的提示?

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

<div class="下拉"><div class="col-md-6" data-toggle="dropdown">第一列<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li>
</div><!-- 下拉列表结束--><div class="下拉"><div class="col-md-6" data-toggle="dropdown">第二列<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li><li>在此处插入您的菜单</li>

</div><!--行尾问题--><脚本>//向下拉菜单添加幻灯片动画//$('.dropdown').on('show.bs.dropdown', function(e){$(this).find('.dropdown-menu').first().stop(true, true).slideDown();});//添加幻灯片动画到下拉//$('.dropdown').on('hide.bs.dropdown', function(e){$(this).find('.dropdown-menu').first().stop(true, true).slideUp();});

解决方案

添加如下css类

.dropdown-menu {宽度:300px！重要；高度:400px！重要；}

当然，您可以使用符合您需要的.

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

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>

解决方案

Add the following css class

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

Of course you can use what matches your need.

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