rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Add Split button Dropdown Center menu example

Browse Source
This commit is contained in:
ZhangChengLin 2023-08-01 13:07:00 +08:00
parent 92aedd15fc
commit e0bb4ffd0e
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
site/content/docs/5.3/components/dropdowns.md
View File

@ -408,15 +408,31 @@ And putting it to use in a navbar:
Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element. Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.
{{< example >}} {{< example >}}
<div class="dropdown-center"> <div class="d-inline-grid d-md-inline-flex gap-4">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <div class="dropdown-center">
Centered dropdown <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
</button> Centered dropdown
<ul class="dropdown-menu"> </button>
<li><a class="dropdown-item" href="#">Action</a></li> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action two</a></li> <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li> <li><a class="dropdown-item" href="#">Action two</a></li>
</ul> <li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
</div>
<div class="btn-group dropdown-center">
<button class="btn btn-secondary" type="button">
Centered dropdown
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
</div>
</div> </div>
{{< /example >}} {{< /example >}}