css 当处于响应模式时，我如何将下拉列表项向左对齐？

gojuced7 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(128)

这是响应时向右对齐的下拉项，我只是想在响应模式下将其向左对齐。

<div class="dropdown">
           <i class="far fa-user-circle" type="button" data-toggle="dropdown" aria-expanded="false" style="font-size:36px"></i>
               <ul class="dropdown-menu dropdown-menu-right">
                   <li><a class="dropdown-item" href="#"><i class="float-right fas fa-unlock-alt pr-2"></i>CHANGE PASSWORD</a></li>
                   <li><a class="dropdown-item" href="#"><i class="float-right fa fa-user pr-2"></i>PROFILE</a></li>
                   <li><a class="dropdown-item" href="#"><i class="float-right fa fa-sign-out-alt pr-1"></i>LOGOUT</a></li>
               </ul>
           </div>

css

来源：https://stackoverflow.com/questions/76169773/how-can-i-align-the-dropdown-items-to-left-when-in-responsive-mode

1条答案

按热度按时间

ezykj2lf1#

要在响应模式下将下拉列表向左对齐，您可以在CSS代码中添加媒体查询。

@media (max-width: 767px) { 
  .dropdown-menu {
    right: auto;
    left: 0;
  }
}

这段代码针对最大宽度为767像素的屏幕，并将.dropdown-menu元素的right属性设置为auto，将left属性设置为0，这会将下拉菜单放置在其父元素的左侧。

赞(0）回复(0）举报 2023-05-08

我来回答

css 当处于响应模式时，我如何将下拉列表项向左对齐？

1条答案

相关问题

热门标签

最新问答