新しい (未完成の) Bootstrap 3 ドキュメントを読んだ後、セマンティック モバイル グリッドを作成する方法を知りたいと思っています。
要するに。これを変換する方法：
<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); }
パート 1: 暴言
HTML へのプレゼンテーション レイヤーとして html div クラスを使用するブートストラップは嫌いです!!! サイトを正しくプログラミングしようとしていることに拍手を送ります。
90 年代から 2000 年代初頭にかけて、テーブルを使って Web サイトを構築していた時代を思い出します... 私たちは人々を後退させているのでしょうか?
<div class="col-6 col-lg-6 col-sm-6">6</div>
<div class="col-6 col-lg-6 col-sm-6">6</div>
対
<table><tr><td>6</td><td>6</td></tr></table>
Google が非セマンティック マークアップに罰則を課す日を待っています。
パート 2: ソリューション
とにかく、これを質問に戻します...
ブートストラップ 3 については、私が知る限り.make-column(6)、ウィンドウ/画面のサイズを指定する必要があるため、Bass Jobsen の回答に従って etc を使用することはできません。lg/ md/ sm/xs
これが私がそれを行う方法です...
メインレス
@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>
私があなたの質問をよく理解しているなら、私はあなたが使うべきだと思います：
<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-span-6クラスはどこにありますか。divcol-small-span-6を離れるとスタックします。小さなグリッドはクラスcol-small-span-6を使用しません。col-span-*
今後、Twitter の Bootstrap は 3 つのグリッドを定義します: 携帯電話用の小さなグリッド (<480px)、タブレット用の小さなグリッド (<768px)、および Destkops 用の中規模の大きなグリッド (>768px)。これらのグリッドの行クラスのプレフィックスは、「.col-」、「.col-sm-」、および「.col-lg-」です。中規模から大規模のグリッドは、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-small-column 関数が含まれなくなりました。参照: 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);}
アップデート
上記の回答は、Twitter の Bootstrap 3 のリリース候補に基づいています。Twitter の Bootstrap 3 の最終バージョンには、極小 (xs)、小 (sm)、中 (md)、大 (lg) の 4 つのグリッドがあります。また、Less コードもこれらのグリッドに従って変更されています。したがって、@gravy の回答で説明されているように、.make-{x}-column mixins を使用してください: https://stackoverflow.com/a/18667955/1596547