From: Mark Otto <otto@github.com>
Date: Tue, 24 Dec 2013 04:28:21 +0000 (-0800)
Subject: add callout about justified button group borders to address #11964
X-Git-Tag: v3.1.0~136^2~35
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=71e9db41834ae1f9873e4047033f868be5e98036;p=thirdparty%2Fbootstrap.git

add callout about justified button group borders to address #11964
---

diff --git a/components.html b/components.html
index 3bdf2df79e..cd38f85eb9 100644
--- a/components.html
+++ b/components.html
@@ -371,6 +371,11 @@ base_url: "../"
     <h3 id="btn-groups-justified">Justified link variation</h3>
     <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>&lt;a&gt;</code> elements as the <code>&lt;button&gt;</code> doesn't pick up the styles we use to justify content (some <code>display: table-cell;</code>-fu).</p>