Twitter Bootstrapを用いてレスポンシブのサイトを構築しているのですが、
col-md-1
ですと最低でも12分の1のサイズにしかなりません。
チェックボックス一つだけを表示する幅があれば十分なので、ギリギリまで幅を詰めたいんですが何か方法はあるでしょうか?
なければ隣のカラムの先頭にチェックボックスを表示して、元のカラムは削除する形にしようと考えています。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するさらに細かく分けたいところで<div class="row">
を指定すれば、そこからまた12分割できます。
http://getbootstrap.com/css/#grid-nesting
2 つ 手があると思います。
<div id="content-row" class="row">
<div class="col-md-2 content" style="background-color:gray">cell2</div>
<div class="col-md-1 content" style="background-color:gray">cell1</div>
<div class="col-md-1" style="background-color:green; padding: 0px;">
<div style="width: 50%; background-color:red; float: left; ">
half
</div>
<div style="width: 50%; background-color:red; float: right; ">
half
</div>
</div>
<div class="col-md-8 content" style="background-color:gray">cell8</div>
</div>
全レイアウトを変更しなければならないので、オーバーキルになる可能性がありますが、Bootstrap は、コンパイル前に、グリッド数設定 (3.x 系なら @grid-columns
) を変更することでグリッド列数を変えられます。
変更するのは、 variables.less
の以下の部分になります。以下では、 24 列の Bootstrap を生成しようとしています。
less/variables.less: (抜粋)
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
例えば、 グリッド列数を 24 とするには以下のようにするでしょう。
less/variables.less: (抜粋)
//** Number of columns in the grid.
@grid-columns: 24;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 15px;
ビルドの流れは大体以下のような感じで。
$ wget https://github.com/twbs/bootstrap/archive/master.zip
$ unzip master.zip && rm master.zip
$ cd bootstrap-master/less
$ vi variables.less # ここで `@grid-columns` と、 `@grid-gutter-width` を編集
$ cd ..
$ sudo npm install
$ grunt dist
すると、 CSS の指定できる列番号が 24 までで、1 列の幅が 4.1% の Bootstrap が生成されます。
dist/css/bootstrap.css: (抜粋)
...
.col-sm-offset-2 {
margin-left: 8.33333333%;
}
.col-sm-offset-1 {
margin-left: 4.16666667%;
}
.col-sm-offset-0 {
margin-left: 0;
}
}
@media (min-width: 992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, ... , .col-md-24 {
float: left;
}
.col-md-24 {
width: 100%;
}
.col-md-23 {
width: 95.83333333%;
}
.col-md-22 {
width: 91.66666667%;
}
.col-md-21 {
width: 87.5%;
}
.col-md-20 {
width: 83.33333333%;
}
...