clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 10:37:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Split button to Responsive alignment example

Browse Source
This commit is contained in:
ZhangChengLin 2023-08-01 13:55:41 +08:00
parent 92aedd15fc
commit 7190411548
1 changed files with 52 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -693,10 +693,13 @@ Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.
If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes.
In the case of using the split button style, dynamic positioning should not be disabled, otherwise the menu will not be accurately positioned to the split button.
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`.
{{< example >}}
<div class="btn-group">
<div class="d-inline-grid gap-4">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
@ -705,13 +708,29 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">
Left-aligned but right aligned when large screen
</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 dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
</div>
{{< /example >}}
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`.
{{< example >}}
<div class="btn-group">
<div class="d-inline-grid gap-4">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
@ -720,6 +739,21 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">
Right-aligned but left aligned when large screen
</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 dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
</div>
{{< /example >}}