ブートストラップのドロップダウンが整列していません

Question

ドロップダウンメニューの整列に問題があります。それは正しく整列されておらず、解像度に応じて流れています。何が原因なのか分かりません。

.nav .dropdown { 
 
     margin-top: -0.5rem; 
 
    } 
 

 
    .btn { 
 
     padding: 2px 10px; 
 
     background-color: transparent; 
 
     border: none; 
 
    } 
 
    
 
    img { 
 
     height: 2.5rem; 
 
     filter: greyscale(100%); 
 
    } 
 
    
 
    img:first-child { 
 
     padding-right: 1px; 
 
    } 
 
    
 
    .dropdown-menu { 
 
     min-width: 1rem 
 
    }

<div class="col-xs-2 col-sm-2 col-md-2 col-md-offset-1 col-sm-offset-1 col-xs-offset-1"> 
 
    <div class="dropdown"> 
 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
      <img src="img/united-kingdom.svg" alt="UK version"> 
 
      <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1"> 
 
      <li><a href="#"><img src="img/united-states.svg" alt="usa version"></a></li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 1

メインDIVに位置を追加し、個々のドロップダウン要素

.nav 
.dropdown{ 
    margin-top: -0.5rem; 
    position: relative; // for keeping it alligned on same line 
} 
.btn{ 
    padding: 2px 10px 
    background-color: transparent 
    border: none 
} 
img{ 
    height: 2.5rem 
    filter: grayscale(100%) 
} 
img:first-child{ 
    padding-right: 1px 
} 
.dropdown-menu{ 
    min-width: 1rem 
    position: absoulute // for keeping it aligned on same line 
}