]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a4bf6ef)
ensure 100% width for .uneditable-inputs in <767px viewports
authorMark Otto <markotto@twitter.com>
Sun, 23 Sep 2012 23:06:28 +0000 (16:06 -0700)
committerMark Otto <markotto@twitter.com>
Sun, 23 Sep 2012 23:06:28 +0000 (16:06 -0700)
docs/assets/css/bootstrap-responsive.css patch | blob | blame | history
docs/assets/css/bootstrap.css patch | blob | blame | history
less/forms.less patch | blob | blame | history
less/responsive-767px-max.less patch | blob | blame | history
less/tests/forms-responsive.html [new file with mode: 0644] patch | blob

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 0161885af31d72ff2a54df5982a500022b624d87..f1efde190e45ffdcf1bc6b194f4ca9b72bb9dc3b 100644 (file)
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -820,6 +820,7 @@
     margin-left: 0;
   }
   [class*="span"],
+  .uneditable-input[class*="span"],
   .row-fluid [class*="span"] {
     display: block;
     float: none;
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index fe577b8da1e38b8dd29542837a89caa5d6578da0..4e533b2523f3e054b40e138f85d6c90eeae75c9a 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -992,6 +992,7 @@ input[type="color"],
   font-size: 14px;
   line-height: 20px;
   color: #555555;
+  vertical-align: middle;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
diff --git a/less/forms.less b/less/forms.less
index c155fc0041f3260b733966c0a24a8d0ed23c2b62..c9fafec274bcb166d1db0ad918fb4a929f808237 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -86,6 +86,7 @@ input[type="color"],
   line-height: @baseLineHeight;
   color: @gray;
   .border-radius(@inputBorderRadius);
+  vertical-align: middle;
 }
 
 // Reset appearance properties for textual inputs and textarea
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index 5cd89e4035939176a0430b187a50b119545f5156..45ce4ebc7714add556089679c6cd729b0b16891a 100644 (file)
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -58,6 +58,7 @@
   }
   // Make all grid-sized elements block level again
   [class*="span"],
+  .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
   .row-fluid [class*="span"] {
     float: none;
     display: block;
diff --git a/less/tests/forms-responsive.html b/less/tests/forms-responsive.html
new file mode 100644 (file)
index 0000000..846d5b4
--- /dev/null
+++ b/less/tests/forms-responsive.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
+    <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <style>
+      body {
+        padding-top: 30px;
+        padding-bottom: 30px;
+      }
+    </style>
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
+  </head>
+
+  <body>
+
+    <form class="container">
+
+      <div class="page-header">
+        <h1>Fixed grid</h1>
+      </div>
+
+      <h3>Vertical alignment</h3>
+      <input type="text" class="span2" placeholder="span2">
+      <select class="span2"><option>span2</option></select>
+      <span class="uneditable-input span2">span1</span>
+
+      <h3>Width across elements</h3>
+      <div>
+        <input type="text" class="span2" placeholder="span2">
+      </div>
+      <div>
+        <select class="span2"><option>span2</option></select>
+      </div>
+      <div>
+        <span class="uneditable-input span2">span2</span>
+      </div>
+
+
+      <div class="page-header">
+        <h1>Fluid grid</h1>
+      </div>
+
+      <div class="row-fluid">
+        <input type="text" class="span2" placeholder="span2">
+        <select class="span2"><option>span2</option></select>
+        <span class="uneditable-input span2">span1</span>
+      </div>
+
+    </form> <!-- /container -->
+
+  </body>
+</html>
Mirror of https://github.com/twbs/bootstrap.git