カラム数比較サンプル
常に水平グリッド表示するcol-xs-を使ったカラム数比較サンプル。
サンプル
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
1
11
2
10
3
9
4
8
5
7
3
6
3
ソースコード
<style>
.sampleRow > div {
border: 1px solid gray;
}
</style>
<div class="container-fluid">
<div class="row sampleRow">
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
</div>
<div class="row sampleRow">
<div class="col-xs-2">2</div>
<div class="col-xs-2">2</div>
<div class="col-xs-2">2</div>
<div class="col-xs-2">2</div>
<div class="col-xs-2">2</div>
<div class="col-xs-2">2</div>
</div>
<div class="row sampleRow">
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
</div>
<div class="row sampleRow">
<div class="col-xs-4">4</div>
<div class="col-xs-4">4</div>
<div class="col-xs-4">4</div>
</div>
<div class="row sampleRow">
<div class="col-xs-6">6</div>
<div class="col-xs-6">6</div>
</div>
<div class="row sampleRow">
<div class="col-xs-12">12</div>
</div>
<div class="row sampleRow">
<div class="col-xs-1">1</div>
<div class="col-xs-11">11</div>
</div>
<div class="row sampleRow">
<div class="col-xs-2">2</div>
<div class="col-xs-10">10</div>
</div>
<div class="row sampleRow">
<div class="col-xs-3">3</div>
<div class="col-xs-9">9</div>
</div>
<div class="row sampleRow">
<div class="col-xs-4">4</div>
<div class="col-xs-8">8</div>
</div>
<div class="row sampleRow">
<div class="col-xs-5">5</div>
<div class="col-xs-7">7</div>
</div>
<div class="row sampleRow">
<div class="col-xs-3">3</div>
<div class="col-xs-6">6</div>
<div class="col-xs-3">3</div>
</div>
</div>