"dynamic width"
Bootstrap 3.0.0 Snippet by vicky04666

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="width100_p pad" id="plan_1">
<div class="width40_p green text-center">
<h1>Width 40%</h1>
</div>
<div class="width60_p ">
<div class="red text-center">
<h1>width 33%</h1>
</div>
<div class="red text-center">
<h1>width 33%</h1>
</div>
<div class="red text-center">
<h1>width 33%</h1>
</div>
</div>
</div>
<div class="width100_p pad" id="plan_1">
<div class="width40_p green text-center">
<h1>Width 40%</h1>
</div>
<div class="width60_p">
<div class="red text-center">
<h1>width 33%</h1>
</div>
<div class="red text-center">
<h1>width 33%</h1>
</div>
<div class="red text-center">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.pad {
padding: 10px 0px;
}
.width100_p {
width: 100%;
float: left;
}
.width40_p {
width: 39%;
float: left;
}
.width33_p {
width: 32%;
float: left;
}
.width50_p {
width: 49%;
float: left;
}
.width60_p {
width: 58%;
float: left;
}
.width25_p {
width: 25%;
float: left;
}
.blue {
background-color: blue;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
$(".width60_p").each(function() {
var a = $(this).children(".red").length;
if (a == 3) {
$(this).children(".red").addClass('width33_p');
} else if (a == 2) {
$(this).children(".red").addClass('width50_p');
} else if (a == 1) {
$(this).children(".red").addClass('width100_p');
} else {
$(this).children(".red").addClass('width33_p');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: