下拉对齐下拉切换右答案

【问题标题】：dropdown align dropdown-toggle right下拉对齐下拉切换右
【发布时间】：2017-10-05 16:48:04
【问题描述】：

如何在引导下拉菜单中右对齐下拉切换？这是我的代码和一个 jsfiddle，你可以看到指向下方的箭头在文本之外，我想要它在右边。

<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>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

使用 CSS 旋转箭头：

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

将 CSS 浮动添加到右对齐：

float:right;

【讨论】：

谢谢，添加float:right似乎也调整了箭头的位置，感谢Dev Bunker的回复我还添加了margin-top

【解决方案2】：

右对齐菜单切换

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

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

fiddle

右对齐菜单

按照文档中的说明将 dropdown-menu-right 类添加到您的菜单中：

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

fiddle

【讨论】：

【解决方案3】：

您可以在 .dropdown-toggle::after 中添加一个浮点数。它看起来像这样：

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .3em;
    vertical-align: middle;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    float: right;
    margin-top: 8px;
}

【讨论】：