Twitterのブートストラップ3.xセマンティックモバイルグリッド

新しい（未完成の）Bootstrap 3 docsを読んだ後、セマンティックモバイルグリッドの作成方法が不思議です。Twitterのブートストラップ3.xセマンティックモバイルグリッド

要するに、これに

<div class="row"> 
    <div class="col col-lg-6 col-sm-6">6</div> 
    <div class="col col-lg-6 col-sm-6">6</div> 
</div>

と小型モバイルグリッドを保存する：これを変換する方法

<div class="wrapper"> 
    <div class="left">6</div> 
    <div class="right">6</div> 
</div>

少ない

.wrapper { .make-row(); } 
.left { .make-column(6); // this creates only large grid } 
.right { .make-column(6); }

出典

2013-06-25 howtodothis

私はよく私はあなたが使うべきだと思うあなたの質問を理解していれば：

col-span-6が小さいグリッドのための大規模なグリッドと col-small-span-6のためのあなたのクラスである <div class="row"> <div class="col-span-6 col-small-span-6″>6</div> <div class="col-span-6 col-small-span-6″>6</div> </div>

。 col-small-span-6を残すと、divがスタックします。小さなグリッドは col-span-*のクラスを使用しません。 Destkops用の錠剤のための小グリッド（< 768px）とミディアム大グリッド、携帯電話用タイニーグリッド（< 480PX）（> 768px）：

も参照してください：Twitterのブートストラップが3つのグリッドを定義し、今からhttp://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

。これらのグリッドの行クラス接頭辞は、 ".col-"、 ".col-sm-"および ".col-lg-"です。 Medium-largeグリッドは、768ピクセルの画面幅より下に積み重なります。したがって、480ピクセル以下の小さなグリッドと小さなグリッドは積み重ねられません。

だからあなたのHTMLは次のようになります。

<div class="row"> 
    <div class="col-6 col-lg-6 col-sm-6">6</div> 
    <div class="col-6 col-lg-6 col-sm-6">6</div> 
</div>

LESS ~~最新バージョン： https://github.com/twitter/bootstrap/archive/3.0.0-wip.zipが、それ以上.make小列関数が含まれていません。~~ も参照してください。https://github.com/twbs/bootstrap/pull/8302 .make-column（）はmin-width：@ grid-float-breakpointのメディアクエリを追加します。小さなグリッドでは、この関数を使用してカラムが常にスタックされます。

あなたは試みることができる：

// Generate the small columns 
.make-small-column(@columns) { 
    position: relative; 
    float: left; 
    // Prevent columns from collapsing when empty 
    min-height: 1px; 
    // Inner gutter via padding 
    padding-left: (@grid-gutter-width/2); 
    padding-right: (@grid-gutter-width/2); 
    @max : (@grid-float-breakpoint - 1); 
    // Calculate width based on number of columns available 
    @media (max-width: @max) { 
    width: percentage((@columns/@grid-columns)); 
    } 
} 

.wrapper { .make-row(); } 
.left { .make-column(6); .make-small-column(6);} 
.right { .make-column(6); .make-small-column(6);}

UPDATE上記のTwitterのブートストラップ3. Twitterのブートストラップ3の最終版のリリース候補に基づくことになる答えは、小さな余分な4グリッドを（持っている

xs）、小さい（sm）、中程度（md）、大（lg）です。また、Lessコードはこれらのグリッドに応じて変更されています。彼の答えに@gravyによって記述ように{X} - カラムミックスイン.make-を使用します。https://stackoverflow.com/a/18667955/1596547

出典

2013-06-25 21:45:11

PART 1：暴言

私は自分のHTMLにプレゼンテーション層としてHTMLのdivクラスを使用してブートストラッパを憎みます！！私はあなたのサイトを正しくプログラミングしようと歓迎します。

私たちがテーブルを使ってウェブサイトを構築していた90年代と2000年代のことを思い出させます。

<table><tr><td>6</td><td>6</td></tr></table>

対
<div class="col-6 col-lg-6 col-sm-6">6</div> 
<div class="col-6 col-lg-6 col-sm-6">6</div> 
私はGoogleが非セマンティックマークアップにペナルティを課し日を待っています。ブートストラップ3のためにとにかくソリューション

、質問にこのバックを引っ張っ...

、私の知る限り、あなたは通り... .make-column(6)などを使用することはできません。

PART 2 Bass Jobsenの答えは、ウィンドウ/スクリーンのサイズを指定する必要があるためです。ここでlg/md/sm/xs

私はそれを行うだろうかです...

main.less

@import 'bootstrap.less'; 

.wrapper { 
    .container; 
    .make-row(); 
    .clearfix(); 
} 

.content-main { // Change these for each window size 
    .make-lg-column(6); 
    .make-md-column(6); 
    .make-sm-column(6); 
    .make-xs-column(6); 
} 
.content-sidebar { // change these for each window size 
    .make-lg-column(6); 
    .make-md-column(6); 
    .make-sm-column(6); 
    .make-xs-column(6); 
}

index.htmlを

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Page Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="UTF-8"> 
    <style rel="stylesheet/less" src="less/main.less" /> 
    <script src="js/less-1.4.1.min.js" type="text/javascript"></script> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 

    <script src="assets/js/html5shiv.js"></script> 
    <script src="assets/js/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="content-main"> 
      <div class="page-title"> 
       <!-- Page Title Stuff --> 
      </div> 
      <div class="page-content"> 
       <!-- Page Content Stuff --> 
      </div> 
     </div> 
     <div class="content-sidebar"><!-- Page Footer Stuff --></div> 
    </div> 
</body>

出典

2013-09-06 23:17:51 Gravy

この答えは良いですが、ブートストラップが提供するミックスインを使用しています。 '.container'と' .make-row'を同じ要素に置くことには注意が必要です。なぜなら、それらは異なるマージン（コンテナの自動マージンと行のガターサイズの半分の負のマージン）を持つからです。したがって、行はすべてのコンテナの内側に配置する必要があります。 – rmarscher

Twitterのブートストラップ3.xセマンティックモバイルグリッド

答えて

関連する問題