Question

我已经尝试了很多没有得到解决方案，你可以请帮助这个...实际上我通过给下拉菜单的最小宽度设置它但是在响应的情况下和当菜单项包含大词时菜单物品正在扩展到开箱即用。

var listoption,compllist;          

for(var i = 0; i < resp.items.length; i++ ){             

var title = resp.items[i].title;

listoption += '<option id='+title+' value='+title+'>'+title+'</option>';
            }
            compllist = "<select name='list' id='list'><option>Select</option>"+listoption+"</select>";
            $("#container").html(compllist);

Answer 1

您可以使用以下代码设置下拉列表和按钮的宽度。只需更改宽度的大小

.dropdown-menu {
   width: 100%; 
 }

.btn{
   width: 100%;
 }

Answer 2

您可以使用媒体查询。等，

@media only screen and (max-width: 768px) {
  .dropdown-menu{
     min-width: 400px;
  }
}
 @media only screen and (max-width: 480px) {
  .dropdown-menu{
     min-width: 320px;
  }
}

Answer 3

当菜单项的文字太长时，你可以剪掉溢出：

.dropdown-item { 
     overflow:hidden;
     white-space:nowrap;
     text-overflow:ellipsis;    
}

请注意省略号属性，溢出的内容会以点的形式显示给用户，而不仅仅是硬剪切内容

Answer 4

我认为您应该将按钮和下拉列表放在col中并使用btn-block，以便它始终填充列。然后，您可以响应地调整列的大小。

演示：http://www.codeply.com/go/OE4tnyG1lt

<div class="container-fluid">
    <div id="navbar-two">
        <div class="row">
            <div class="col-sm-8 col-md-9">
                <ul class="nav navbar-two-list">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">My Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">You &amp; Peers</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Family</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-4 col-md-3">
                <ul class="nav">
                    <li class="col-12 px-0">
                        <button class="btn btn-success btn-block dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Add Mutual Funds<sub><i class="fa fa-angle-down" aria-hidden="true"></i></sub></button>
                        <div class="dropdown-menu w-100">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

演示：http://www.codeply.com/go/OE4tnyG1lt

将Bootstrap 4下拉对齐到按钮的宽度

4 个答案: