I am trying to line up 2 rows of in larger media and have them collapse into a lined up grid in smaller media. btn-group-justified works for the representation on small media, but creates 4 rows on larger media. I tried .btn-matrix How I can make nice looking matrix of buttons with bootstrap 3? , but it generates 4 rows as well. Here is the html:
window.onresize = resize;
function resize() {
var curwidth = document.body.clientWidth;
//console.log("resize event detected:"+curwidth);
if(curwidth<992){
var els = document.getElementsByClassName('btn-group btn-group-qtr col-md-3');
i = els.length;
while (i--) {
els[i].className = 'btn-group btn-group-justified col-md-3';
}
}else{
var els = document.getElementsByClassName('btn-group btn-group-justified col-md-3');
i = els.length;
while (i--) {
els[i].className = 'btn-group btn-group-qtr col-md-3';
}
}
}.btn-group-qtr {
display: table;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-qtr > .btn,
.btn-group-qtr > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-qtr > .btn-group .dropdown-menu {
left: auto;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<title>btn groups</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
.btn-group-qtr {
display: table;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-qtr > .btn,
.btn-group-qtr > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-qtr > .btn-group .dropdown-menu {
left: auto;
}
</style>
</head>
<body>
<div class="panel-body">
<form role="form" name="myForm1" class="form-horizontal">
<div class= "form-group">
<div class="row btn-group">
<span class="btn-group btn-group-qtr col-md-3">
<a href="#" class="btn btn-primary">Find</a>
<a href="#" class="btn btn-primary">Sched</a>
<a href="#" class="btn btn-primary">New</a>
<a href="#" class="btn btn-primary">Lookup</a>
</span>
<span class="btn-group btn-group-qtr col-md-3">
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Change</a>
<a href="#" class="btn btn-primary">Notes</a>
<a href="#" class="btn btn-primary">Info</a>
</span>
<span class="btn-group btn-group-qtr col-md-3">
<a href="#" class="btn btn-primary">Chgs</a>
<a href="#" class="btn btn-primary">Pmts</a>
<a href="#" class="btn btn-primary">Stmt</a>
<a href="#" class="btn btn-primary">Hist</a>
</span>
<span class="btn-group btn-group-qtr col-md-3">
<a href="#" class="btn btn-primary">Pol</a>
<a href="#" class="btn btn-primary">Img</a>
<a href="#" class="btn btn-primary">DmdIns</a>
<a href="#" class="btn btn-primary">PmtIns</a>
</span>
</div>
<div class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Account</span>
<input class="form-control" type="text" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Command</span>
<input class="form-control" type="text" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Ticket</span>
<input class="form-control" type="text" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">AcctList</span>
<select class="form-control" style="min-width:100%;">
<option>1</option>
<option>2</option>
<option>13072</option>
<option>50000</option>
<option>59949</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="panel-body">
<form role="form" name="myForm2" class="form-horizontal">
<div class= "form-group">
<div class="row btn-group">
<span class="btn-group btn-group-justified col-md-3">
<a href="#" class="btn btn-primary">Find</a>
<a href="#" class="btn btn-primary">Sched</a>
<a href="#" class="btn btn-primary">New</a>
<a href="#" class="btn btn-primary">Lookup</a>
</span>
<span class="btn-group btn-group-justified col-md-3">
<a href="#" class="btn btn-primary">Add</a>
<a href="#" class="btn btn-primary">Change</a>
<a href="#" class="btn btn-primary">Notes</a>
<a href="#" class="btn btn-primary">Info</a>
</span>
<span class="btn-group btn-group-justified col-md-3">
<a href="#" class="btn btn-primary">Chgs</a>
<a href="#" class="btn btn-primary">Pmts</a>
<a href="#" class="btn btn-primary">Stmt</a>
<a href="#" class="btn btn-primary">Hist</a>
</span>
<span class="btn-group btn-group-justified col-md-3">
<a href="#" class="btn btn-primary">Pol</a>
<a href="#" class="btn btn-primary">Img</a>
<a href="#" class="btn btn-primary">DmdIns</a>
<a href="#" class="btn btn-primary">PmtIns</a>
</span>
</div>
<div class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Account</span>
<input class="form-control" type="text" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Command</span>
<input class="form-control" type="text" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Ticket</span>
<input class="form-control" type="text" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">AcctList</span>
<select class="form-control" style="min-width:100%;">
<option>1</option>
<option>2</option>
<option>13072</option>
<option>50000</option>
<option>59949</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>The Form1 section looks fine on large media, but collapses into a jumble of buttons that have varying widths on small media. Any ideas how to make them line up after collapsing and look similar to Form2? -- TIA
UPDATE: added a quick-fix in javascript to switch classes on window resize at hard-coded breakpoint. Still need to compute the differences between the 2 classes and create @media queries to resolve them vs. using this quick-fix.
