Бутстрап выпадающего меню настройки

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

ответ Jamdev близка, но это ваш #user-dp, который устанавливает мин ширину. Это будет держать вашу коробку шириной 300 пикселей независимо от размера окна. Добавив следующий CSS, вы измените минимальную ширину на 0, когда ваше окно будет шириной 768 пикселей.

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

Демо: http://www.bootply.com/GetuidWvdM

Answer 2

добавить этот код в ваш custom.css @media (max-width: 767px) .navbar-nav .open .dropdown-menu { min-width:0; }