2012年10月05日

twitter bootstrap で div横並べ

お願いします♪いいねとかつぶやいたりして下さい
 
グリッドデザインというんでしょうか。
http://tech.furyu.jp/blog/?p=1348

bootstrap-responsive.css
を読み込んだ後に以下のCSSを使うだけ。
/**
 * GridSystem for Mobile Display
 */
@media only screen and (max-width: 767px) {

    /* 画面両サイドの余白調整 */
    body {
        width: 100%;
        padding:0;
    }

    .container-fluid{
        padding-left:0; padding-right: 0;
    }

    /* GRID  */
    [class^="row"] > [class*="span"]{
        float: left;
        margin-left: 2.564102564%;
    }
    [class^="row"] > [class*="span"]:first-child {
        margin-left: 0;
    }
    [class^="row"] > .span12 {
        width: 100%;
    }
    [class^="row"] > .span11 {
        width: 91.45299145300001%;
    }
    [class^="row"] > .span10 {
        width: 82.905982906%;
    }
    [class^="row"] > .span9 {
        width: 74.358974359%;
    }
    [class^="row"] > .span8 {
        width: 65.81196581200001%;
    }
    [class^="row"] > .span7 {
        width: 57.264957265%;
    }
    [class^="row"] > .span6 {
        width: 48.717948718%;
    }
    [class^="row"] > .span5 {
        width: 40.170940171000005%;
    }
    [class^="row"] > .span4 {
        width: 31.623931624%;
    }
    [class^="row"] > .span3 {
        width: 23.076923077%;
    }
    [class^="row"] > .span2 {
        width: 14.529914530000001%;
    }
    [class^="row"] > .span1 {
        width: 5.982905983%;
    }
}


すいません、ほぼ丸ぱくりしました。
bodyは無くてもいいかもしれない。

関連するタグ:
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ