将 Bootstrap 4 下拉菜单与按钮的宽度完全对齐

Question

我已经尝试了很多都没有得到解决方案，你能帮忙解决这个问题吗？实际上我是通过给下拉菜单提供最小宽度来设置它，但是在响应的情况下，当菜单项包含大词时，菜单项目正在扩展到开箱即用。

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
    <nav id="navbar-two" class="navbar-nav navbar-toggleable-md mb-4">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="nav navbar-two-list mr-auto">
            <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 class="mt-2 mt-md-0"> 
            <ul class="nav">
                <li class="nav-item">
                    <button class="btn btn-success 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">
                        <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>
</nav>

Answer 1

我认为您应该将按钮和下拉列表放在一起 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

Answer 2

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

.dropdown-menu {
   width: 100%; 
 }

.btn{
   width: 100%;
 }

Answer 3

您可以使用媒体查询。喜欢，

@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 4

当菜单项的文本太长时，您可以剪辑溢出：

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

注意省略号属性，溢出的内容用点指示给用户，而不是硬剪辑内容