6770


Twitter Bootstrapを用いてレスポンシブのサイトを構築しているのですが、  
`col-md-1`ですと最低でも12分の1のサイズにしかなりません。  
チェックボックス一つだけを表示する幅があれば十分なので、ギリギリまで幅を詰めたいんですが何か方法はあるでしょうか？

なければ隣のカラムの先頭にチェックボックスを表示して、元のカラムは削除する形にしようと考えています。


CC BY-SA 3.0
2015-02-19T08:31:33.350
6759
2015-02-20T00:09:56.780
3271
question
twitter-bootstrap
Twitter Bootstrapを使ったレスポンシブで col-md-1 以下のサイズで表示する方法


2 つ 手があると思います。

  1. セルを縦に割る
  2. N 列の Bootstrap を使う

* * *

### 1. width 指定 50%/50% でセルを縦に割る

[code]

    <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>
    
[/code]

![Bootstrap row 2:1:0.5:0.5:8](https://i.stack.imgur.com/ODtBR.png)

### 2. N 列 の Bootstrap をビルド (N:任意整数)

全レイアウトを変更しなければならないので、オーバーキルになる可能性がありますが、Bootstrap は、コンパイル前に、グリッド数設定 (3.x 系なら
`@grid-columns`) を変更することでグリッド列数を変えられます。

変更するのは、 `variables.less` の以下の部分になります。以下では、 24 列の Bootstrap を生成しようとしています。

_less/variables.less_ : (抜粋)

[code]

    //== 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);
    
[/code]

例えば、 グリッド列数を 24 とするには以下のようにするでしょう。

_less/variables.less_ : (抜粋)

[code]

    //** 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;
    
[/code]

ビルドの流れは大体以下のような感じで。

[code]

    $ 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
    
[/code]

すると、 CSS の指定できる列番号が 24 までで、1 列の幅が 4.1% の Bootstrap が生成されます。

_dist/css/bootstrap.css_ : (抜粋)

[code]

    ...
    .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%;
      }
    ...
    
[/code]

### 参考

  * GitHub, [twbs/bootstrap](https://github.com/twbs/bootstrap)
  * StackOverflow, [How to use bootstrap with 16 or 24 columns](https://stackoverflow.com/questions/11591185/how-to-use-bootstrap-with-16-or-24-columns)
  * StackOverflow, [Customizing number of columns in Bootstrap 3](https://stackoverflow.com/questions/19253088/customizing-number-of-columns-in-bootstrap-3)


CC BY-SA 3.0
2015-02-19T10:25:25.730
6770
2015-02-19T10:31:54.847
2017-05-23T12:38:55.307
-1
4978
6759
answer


さらに細かく分けたいところで`<div class="row">`を指定すれば、そこからまた12分割できます。  
<http://getbootstrap.com/css/#grid-nesting>


CC BY-SA 3.0
2015-02-20T00:09:56.780
6798
2015-02-20T00:09:56.780
8416
6759
answer