Bootstrap下拉列表未对齐

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
}