Fixes #15096: Fix navbar forms in the non-responsive example

twbs · Nov 30, 2014 · d74fd9a · d74fd9a
1 parent 9928144
commit d74fd9a
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 1 deletion.
diff --git a/docs/examples/non-responsive/index.html b/docs/examples/non-responsive/index.html
@@ -61,6 +61,12 @@
               </ul>
             </li>
           </ul>
+          <form class="navbar-form navbar-left" role="search">
+            <div class="form-group">
+              <input type="text" class="form-control" placeholder="Search">
+            </div>
+            <button type="submit" class="btn btn-default">Submit</button>
+          </form>
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>

diff --git a/docs/examples/non-responsive/non-responsive.css b/docs/examples/non-responsive/non-responsive.css
@@ -6,11 +6,16 @@
 
 /* Account for fixed navbar */
 body {
-  min-width: 970px;
   padding-top: 70px;
   padding-bottom: 30px;
 }
 
+body,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  min-width: 970px;
+}
+
 /* Don't let the lead text change font-size. */
 .lead {
   font-size: 16px;
@@ -64,6 +69,7 @@ body {
   height: auto !important;
   padding-bottom: 0;
   overflow: visible !important;
+  visibility: visible !important;
 }
 
 .navbar-toggle {
@@ -123,3 +129,73 @@ body {
   color: #999 !important;
   background-color: transparent !important;
 }
+
+/* Undo form expansion */
+.navbar-form {
+  float: left;
+  width: auto;
+  margin-left: 0;
+  margin-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  box-shadow: none;
+}
+
+/* Copy-pasted from forms.less since we mixin the .form-inline styles. */
+.navbar-form .form-group {
+  display: inline-block;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.navbar-form .form-control {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+}
+
+.navbar-form .form-control-static {
+  display: inline-block;
+}
+
+.navbar-form .input-group {
+  display: inline-table;
+  vertical-align: middle;
+}
+
+.navbar-form .input-group .input-group-addon,
+.navbar-form .input-group .input-group-btn,
+.navbar-form .input-group .form-control {
+  width: auto;
+}
+
+.navbar-form .input-group > .form-control {
+  width: 100%;
+}
+
+.navbar-form .control-label {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.navbar-form .radio,
+.navbar-form .checkbox {
+  display: inline-block;
+  margin-top: 0;
+  margin-bottom: 0;
+  vertical-align: middle;
+
+  label {
+    padding-left: 0;
+  }
+}
+.navbar-form .radio input[type="radio"],
+.navbar-form .checkbox input[type="checkbox"] {
+  position: relative;
+  margin-left: 0;
+}
+
+.navbar-form .has-feedback .form-control-feedback {
+  top: 0;
+}