Bootstrap如何让下拉菜单dropdown-menu整体DOM向右对齐

最新推荐文章于 2024-07-12 18:42:04 发布

Rudon滨海渔村

最新推荐文章于 2024-07-12 18:42:04 发布

阅读量867

点赞数

分类专栏：开发 Web HTML 文章标签： bootstrap JS css

本文链接：https://blog.csdn.net/qq285744011/article/details/120568146

版权

开发同时被 3 个专栏收录

236 篇文章 12 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

Web

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在 Bootstrap v3 中正确创建一个下拉菜单，包括 `dropdown` 类、`dropdown-toggle` 类、`aria-*` 属性的使用，以及 `pull-right` 类用于右对齐菜单。示例代码展示了完整的下拉菜单结构，包含链接和分隔符。

摘要由CSDN通过智能技术生成

正确答案

<ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu1">

错误答案

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">

完整代码

组件 · Bootstrap v3 中文文档 | Bootstrap 中文网https://v3.bootcss.com/components/#dropdowns

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>