ブートストラップのドロップダウン調整

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を追加すると、ウィンドウが768px以下になると最小幅が0にリセットされます。

@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; }