rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

ensure 100% width for .uneditable-inputs in <767px viewports

Browse Source
This commit is contained in:
Mark Otto 2012-09-23 16:06:28 -07:00
parent a4bf6ef0a0
commit f4d3d7da2e
5 changed files with 75 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -820,6 +820,7 @@
margin-left: 0; margin-left: 0;
} }
[class*="span"], [class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
display: block; display: block;
float: none; float: none;

1
docs/assets/css/bootstrap.css vendored
View File

@ -992,6 +992,7 @@ input[type="color"],
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: #555555; color: #555555;
vertical-align: middle;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;

1
less/forms.less
View File

@ -86,6 +86,7 @@ input[type="color"],
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @gray; color: @gray;
.border-radius(@inputBorderRadius); .border-radius(@inputBorderRadius);
vertical-align: middle;
} }
// Reset appearance properties for textual inputs and textarea // Reset appearance properties for textual inputs and textarea

1
less/responsive-767px-max.less
View File

@ -58,6 +58,7 @@
} }
// Make all grid-sized elements block level again // Make all grid-sized elements block level again
[class*="span"], [class*="span"],
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
float: none; float: none;
display: block; display: block;

71
less/tests/forms-responsive.html Normal file
View File

@ -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>