mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 18:40:03 +00:00
Code Issues Projects Releases Wiki Activity

Add configurable button text wrapping (#29554)

Browse Source
This commit is contained in:
Martijn Cuppens 2019-10-25 11:37:52 +02:00 committed by XhmikosR
parent b3dfcdc7ed
commit 9ee9b8a1e8
3 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_buttons.scss
View File

@ -11,6 +11,7 @@
line-height: $btn-line-height; line-height: $btn-line-height;
color: $body-color; color: $body-color;
text-align: center; text-align: center;
white-space: $btn-white-space;
vertical-align: middle; vertical-align: middle;
cursor: if($enable-pointer-cursor-for-buttons, pointer, null); cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
user-select: none; user-select: none;

1
scss/_variables.scss
View File

@ -540,6 +540,7 @@ $btn-padding-x: $input-btn-padding-x !default;
$btn-font-family: $input-btn-font-family !default; $btn-font-family: $input-btn-font-family !default;
$btn-font-size: $input-btn-font-size !default; $btn-font-size: $input-btn-font-size !default;
$btn-line-height: $input-btn-line-height !default; $btn-line-height: $input-btn-line-height !default;
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm !default; $btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default; $btn-padding-x-sm: $input-btn-padding-x-sm !default;

4
site/content/docs/4.3/components/buttons.md
View File

@ -24,6 +24,10 @@ Bootstrap includes several predefined button styles, each serving its own semant
{{< partial "callout-warning-color-assistive-technologies.md" >}} {{< partial "callout-warning-color-assistive-technologies.md" >}}
{{< /callout >}} {{< /callout >}}
## Disable text wrapping
If you don't want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
## Button tags ## Button tags
The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering). The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).