dropdown align dropdown-toggle right
问题描述:
如何正确对齐引导下拉菜单中的下拉菜单?这里是我的代码和一个jsfiddle,你可以看到向下的箭头除了文本之外,我希望它在右边。dropdown align dropdown-toggle right
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>
答
使用CSS来旋转箭头:
.dropdown-toggle::after {
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
添加CSS的float到右对齐:
float:right;
答
为右对齐菜单切换
您可以在按钮上使用flexbox
属性:
.is-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
为右对齐菜单
类dropdown-menu-right
添加到您的菜单中的文档中描述:
https://v4-alpha.getbootstrap.com/components/dropdowns/#menu-alignment
答
你可以在.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;
}
谢谢,这似乎也加入'浮动:right'调整箭头的位置,由于开发地堡的回应,我还增加了一个'保证金top' – crimson589