dropdown align dropdown-toggle right

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到右對齊：

float:right; 

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

Answer 3

你可以在.dropdown-toggle :: after後面添加一個float。它看起來是這樣的：

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