Fix up broken input group example layouts

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index db1cb177839b84316768b2c20dcbf97843f750b0..e47805d37b4661b739f860f76211e5c5f475983d 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -348,6 +348,12 @@ body {
 .bs-example-control-sizing input[type="text"] + input[type="text"] {
   margin-top: 10px;
 }
+.bs-example-form {
+  overflow: hidden;
+}
+.bs-example-form .input-group {
+  margin-bottom: 10px;
+}
 
 /* List groups */
 .bs-example > .list-group {

diff --git a/docs/css.html b/docs/css.html
index 7cc50602e8cde7a1abc0e1fc3f399373532a949a..6b6695464d3f323235e59897c3b6383c644cac2c 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -1516,7 +1516,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
     </div>
 
-    <form class="bs-example">
+    <form class="bs-example bs-example-form">
       <div class="input-group col-lg-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
@@ -1553,7 +1553,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Optional sizes</h4>
     <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
-    <form class="bs-example">
+    <form class="bs-example bs-example-form">
       <div class="input-group col-lg-9">
         <span class="input-group-addon input-large">@</span>
         <input type="text" class="input-large" placeholder="Username">
@@ -1588,7 +1588,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Buttons instead of text</h4>
     <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
-    <form class="bs-example">
+    <form class="bs-example bs-example-form">
       <div class="input-group col-lg-7">
         <span class="input-group-btn">
           <button class="btn btn-default" type="button">Go!</button>
@@ -1621,7 +1621,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Button dropdowns</h4>
     <p></p>
-    <form class="bs-example">
+    <form class="bs-example bs-example-form">
       <div class="input-group col-lg-7">
         <div class="input-group-btn">
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1681,7 +1681,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h4>Segmented dropdown groups</h4>
-    <form class="bs-example">
+    <form class="bs-example bs-example-form">
       <div class="input-group col-lg-7">
         <div class="input-group-btn">
           <button type="button" class="btn btn-default" tabindex="-1">Action</button>