rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

flex the footer and include some margin magic

Browse Source 
- we need to set margin for space between footer buttons as flexbox doesn't render HTML spaces like inline-block does

- flexbox doesn't have collapsing margins or anything, so we hack it with some :not(:first-child) and :not(:last-child) action
This commit is contained in:
Mark Otto 2016-12-24 17:27:42 -08:00 committed by Mark Otto
parent 33746dc63e
commit eb19def798
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
scss/_modal.scss
View File

@ -102,10 +102,15 @@
// Footer (for actions)
.modal-footer {
display: flex;
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
align-items: center; // vertically center
padding: $modal-inner-padding;
text-align: right; // right align buttons
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include clearfix(); // clear it in case folks use .float-* classes on buttons
// Easily place margin between footer elements
> :not(:first-child) { margin-left: .25rem; }
> :not(:last-child) { margin-right: .25rem; }
}
// Measure scrollbar width for padding body during modal show/hide