Skip to content

Instantly share code, notes, and snippets.

@phearnot
Created April 17, 2013 13:49
Show Gist options
  • Save phearnot/5404467 to your computer and use it in GitHub Desktop.
Save phearnot/5404467 to your computer and use it in GitHub Desktop.
A bug in either webkit or bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Button Test</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
#job-list {
-webkit-column-width: 23em;
-moz-column-width: 23em;
column-width: 23em;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;
}
.any {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
border: 1px solid #ccc;
min-height: 20px;
padding: 5px;
margin-bottom: 5px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="job-list" class="row-fluid">
<div class="any">
<button class="btn btn-small disabled">test</button>
<span class="help-inline">Test<span class="label">Test</span></span>
</div>
<div class="any">
<button class="btn btn-small disabled">test</button>
<span class="help-inline">Test<span class="label">Test</span></span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment