时间戳

首页 > 解决方案 > bootstrap 下拉::after 伪元素右对齐

html - bootstrap 下拉::after 伪元素右对齐

问题描述

我目前正在使用btn-block我的.dropdown-toggle按钮使其全宽。

但是，我不喜欢 ::after 伪元素如何仅与按钮内容保持固定宽度。

我对伪元素样式很弱，但有没有办法让下拉箭头“浮动”并从下拉列表的右侧以固定宽度对齐？

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

标签： htmlcsstwitter-bootstrap

解决方案

您可以制作:after元素position: absolute;并将其向右对齐，如下所示......

.dropdown-toggle::after {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px;
}

和元素用于帮助垂直对齐箭头top，margin-top无论下拉菜单的高度如何。

推荐阅读