的style.css

Question

我尝试调整下拉列表中的glyphicon-user icon和btn-primary，以便在调整窗口大小时正确显示。但是，当我调整窗口大小时，我的按钮对齐似乎不在窗口中，我无法查看按钮的结尾。回答任何人？

<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设定了最小宽度。无论窗口大小如何，这都将使您的盒子保持300px宽。通过添加以下CSS，只要窗口宽度小于768px，就会将最小宽度重置为0.

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

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

Bootstrap下拉调整

的style.css

2 个答案: