bootstarp4下拉菜单把列撑大

Question

情况如下图

 

代码如下图

<nav class="navbar  navbar-light justify-content-end ">
    <ul class="navbar-nav  " >
        <li class="nav-item dropdown bg-danger"  >
            <a class="nav-link " href="user/loginAndRegister.html" data-toggle="dropdown">登录</a>
            <div class="dropdown-menu " >
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
            </div>
        </li>

        <!--让导航控件之间有距离-->
        <li class="nav-item" style="margin-left: 10px">
            <a class="nav-link" href="#">消息</a>
        </li>
        <li class="nav-item" style="margin-left: 10px">
            <a class="nav-link" href="#">收藏</a>
        </li>
        <li class="nav-item" style="margin-left: 10px">
            <button type="button" class="btn li-btn" style="margin-left: 10px">
                <a href="#" style="text-decoration: none " class="btn-a-color">创作</a>
            </button>
        </li>
    </ul>
</nav>

重写的一些可能有影响的

.navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: unset;
    flex-direction: unset;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}


.dropdown-menu {
    min-width: 0;
    text-align: center;
}

Answer 1

直接style加个对下拉框的宽度定义

.navbar-nav>li>.dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    min-width: 75px;
    width: 75px;
}