diff options
| author | Mark Otto <[email protected]> | 2013-12-23 20:28:21 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-12-23 20:28:21 -0800 |
| commit | 71e9db41834ae1f9873e4047033f868be5e98036 (patch) | |
| tree | 0486e0ca8e8db9b27b1712b14978537aecea6593 | |
| parent | 340e2f553459a6499d77800658a37724af81dfb0 (diff) | |
| download | bootstrap-71e9db41834ae1f9873e4047033f868be5e98036.tar.xz bootstrap-71e9db41834ae1f9873e4047033f868be5e98036.zip | |
add callout about justified button group borders to address #11964
| -rw-r--r-- | components.html | 5 |
1 files changed, 5 insertions, 0 deletions
diff --git a/components.html b/components.html index 3bdf2df79..cd38f85eb 100644 --- a/components.html +++ b/components.html @@ -372,6 +372,11 @@ base_url: "../" <p>Make a group of buttons stretch at the same size to span the entire width of its parent. Also works with button dropdowns within the button group.</p> <div class="bs-callout bs-callout-warning"> + <h4>Handling borders</h4> + <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p> + </div> + + <div class="bs-callout bs-callout-warning"> <h4>Element-specific usage</h4> <p>This only works with <code><a></code> elements as the <code><button></code> doesn't pick up the styles we use to justify content (some <code>display: table-cell;</code>-fu).</p> </div> |