Bootstrap 下拉调整

Question

我正在尝试调整下拉列表中的 glyphicon-user icon 和 btn-primary，以便在 window 调整大小时正确显示。但是，当我调整 window 大小时，我的按钮对齐方式似乎超出了 window，我看不到按钮的末端。有人回答吗？

<div class="container-fluid">
         <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                       <strong>User</strong>
                    </a>
                    <ul id="user-dp" class="dropdown-menu">
                                <li>
                                    <div class="row">
                                    <!-- Login -->
                                        <div class="col-lg-4">
                                        <p class="text-center">
                                            <span class="glyphicon glyphicon-user icon-size"></span>
                                        </p>
                                        </div>
                                    <div class="col-lg-8">
                                        <p class="text-left"><strong>Test</strong></p>
                                        <p class="text-left">
                                            <a href="#" class="btn btn-primary btn-block btn-sm">Testing</a>
                                        </p>
                                    </div>
                                        <div class="bottom text-center">
                                        <a href="#" class="btn btn-danger btn-block">Test again</a>
                                    </div>
                                </div>
                            </li>
                    </ul>
                </li>
          </ul>
</div>

style.css

.icon-size
{
    margin-top:5%;
    font-size: 87px;
}
#user-dp{
    min-width: 300px;
    padding: 14px 14px 0;
    overflow:hidden;
    background-color:rgba(255,255,255,.8);
}
#user-dp .help-block{
    font-size:12px    
}
#user-dp .bottom{
    background-color:rgba(255,255,255,.8);
    border-top:1px solid #ddd;
    clear:both;
    padding:14px;
}

Answer 1

将此代码添加到您的 custom.css @media (max-width: 767px) .navbar-nav .open .dropdown-menu { min-width:0; }

Answer 2

Jamdev 的答案很接近，但设置最小宽度的是您的 #user-dp。无论 window 大小如何，这将使您的框保持 300 像素宽。通过添加以下 CSS，只要 window 宽度低于 768px，您就会将最小宽度重置为 0。

@media (max-width: 768px) {
    #user-dp { 
        min-width:0; 
    } 
}

演示：http://www.bootply.com/GetuidWvdM

Bootstrap 下拉调整

Bootstrap dropdown adjustment

html

css

col

css-tables

twitter-bootstrap

style.css