下拉菜单对齐下拉菜单切换按钮右侧。

Question

如何将Bootstrap下拉菜单中的dropdown-toggle右对齐？以下是我的代码和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>

- crimson589

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;

- lky

---

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

Answer 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

- sol

Answer 3

你可以给.dropdown-toggle::after添加一个float:right。具体代码如下：

.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;
}

- Dev Bunker

Answer 4

你可以使用 absolute 定位，然后通过设置 right: 0% 或 left: 0% 来将下拉图标对齐到左侧或右侧。如果需要的话，可以添加 margin，这样下拉图标就不会与边框粘在一起了。

.dropdown-toggle::after {
    position: absolute;
    right: 0%;
    margin-right: 16px;
}

- Saad Zahoor

---

那只是有效的。谢谢！ - voodoo98