鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

Bootstrap3でモバイルでは2列×3行。タブレットPCでは3列×2行にする方法

モバイルでは2列×3行。 タブレットやPCでは3列×2行のレイアウトになります。 divのrowクラスの中に入れちゃうとうまく表現できません。

なるほど。

divのクラスをコンテナにして、その中に記述していけばいいのか。

<div class="container">
  <div class="col-xs-6 col-sm-4 col-md-4"><div class="well">
   <div class="big-icon"><i class="fa fa-pencil fa-4x"></i><strong>Simple</strong></div>
   <p class="ja ja-font">練習日誌の入力をシンプルに。毎日走るランナーの味方を目指しています。</p>
  </div></div>

  <div class="col-xs-6 col-sm-4 col-md-4"><div class="well">
   <div class="big-icon"><i class="fa fa-rocket fa-4x"></i><strong>Strong</strong></div>
   <p class="ja ja-font">朝練、昼練、夜練。1日の練習をそれぞれ別々に入力できます。また、走った時のアイテム(シューズやウェア)まで管理することができます。</p>
  </div></div>

  <div class="col-xs-6 col-sm-4 col-md-4"><div class="well">
   <div class="big-icon"><i class="fa fa-map-marker fa-4x"></i><strong>Navigation</strong></div>
   <p class="ja ja-font">長距離ランの基本イーブンペースをナビゲートします。登録したコースは1km毎のストリートビューでみれます。走る前のコース確認ができます。</p>
  </div></div>

  <div class="col-xs-6 col-sm-4 col-md-4"><div class="well">
   <div class="big-icon"><i class="fa fa-group fa-4x"></i><strong>Social</strong></div>
   <p class="ja ja-font">練習タイムはコース毎に公開されます。同じコースを走っているライバルランナーを見つけたりすることもできます。また走ったタイムとアイテムが一覧表示されるため、トップランナーの身に着けているアイテムを参照できます。</p>
  </div></div>

  <div class="col-xs-6 col-sm-4 col-md-4"><div class="well">
   <div class="big-icon"><i class="fa fa-tachometer fa-4x"></i><strong>History</strong></div>
   <p class="ja ja-font">走った時のシューズやウェアの通算走行距離も管理することができます。これからは、シューズの交換時期の目安で困ることもありません。</p>
  </div></div>

  <div class="col-xs-6 col-sm-4 col-md-4"><div class="well">
   <div class="big-icon"><i class="fa fa-wrench fa-4x"></i><strong>Feedback</strong></div>
   <p class="ja ja-font">開発者自身がベテランランナーです。ランナー視点の機能を続々追加していく予定です。</p>
  </div></div>

</div>