mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

Add dropdown responsive alignment (#26255)

Browse Source
This commit is contained in:
ysds
2018-10-21 17:01:22 +09:00
committed by XhmikosR
parent 6bae9ef786
commit becb6ce346
2 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
site/docs/4.1/components/dropdowns.md
View File

@@ -616,6 +616,44 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
{% endcapture %}
{% include example.html content=example %}
### Responsive alignment
If you want to use responsive alignment, disable dynamic positioning by adding the `data-display="static"` attribute and use the responsive variation classes.
To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl}-right`.
{% capture example %}
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl}-left`.
{% capture example %}
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
Note that you don't need to add a `data-display="static"` attribute to dropdown buttons in navbars, since Popper.js isn't used in navbars.
## Menu content
### Headers