下拉对齐下拉切换右

Question

我怎样才能在引导下拉菜单中正确对齐下拉开关？这是我的代码和一个 jsfiddle，你可以看到除文本之外的向下箭头，我希望它在右边。

https://jsfiddle.net/9a83n353/

<div class="dropdown">
    <button class="btn dropdown-toggle btn-block text-left" style="background-color: white; border-color:#dee4ed" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Active</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item">Active</a>
        <a class="dropdown-item">Inactive</a>
    </div>
</div>

Answer 1

使用 CSS 旋转箭头：

.dropdown-toggle::after {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}

将 CSS 浮动添加到右对齐：

float:right;

Answer 2

右对齐菜单切换

您可以flexbox在按钮上使用属性：

.is-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

小提琴

右对齐菜单

dropdown-menu-right如文档中所述，将该类添加到您的菜单中：

https://v4-alpha.getbootstrap.com/components/dropdowns/#menu-alignment

小提琴