Bootstrap Drop-Down-Anpassung

Question

Ich versuche, die glyphicon-user icon und btn-primary in Dropdown richtig angezeigt werden, wenn das Fenster die Größe geändert wird. Wenn ich jedoch die Größe des Fensters ändere, scheint meine Tastenausrichtung außerhalb des Fensters zu liegen, in dem ich das Ende der Taste nicht sehen kann. Antworten auf jemanden?

<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 Antwort nahe ist, aber es ist Ihre #user-dp, die die min-width setzt. Dadurch bleibt Ihre Box 300 Pixel breit, unabhängig von der Fenstergröße. Wenn Sie das folgende CSS hinzufügen, setzen Sie die Mindestbreite auf 0 zurück, wenn Ihr Fenster weniger als 768 Pixel breit ist.

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

Demo: http://www.bootply.com/GetuidWvdM

Answer 2

diesen Code in Ihre custom.css hinzufügen @media (max-width: 767px) .navbar-nav .open .dropdown-menu { min-width:0; }