facebook twitter hatena line email

Html/bootstrap/bootstrap3/端末サイズ別block設定

提供: 初心者エンジニアの簡易メモ
2015年5月20日 (水) 03:17時点における127.0.0.1 (トーク)による版 (ページの作成:「スマホだと横2列、タブレットサイズ以上だと横3列 <<nowiki />div class="container"> <<nowiki />div class="row"> <<nowiki />di...」)

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内検索

スマホだと横2列、タブレットサイズ以上だと横3列

   <div class="container">
       <div class="row">
           <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
           <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
           <div class="clearfix visible-sm-block"></div>
           <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
           <div class="clearfix visible-md-block"></div>
           <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
           <div class="clearfix visible-sm-block"></div>
           <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
           <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
           <div class="clearfix visible-sm-block"></div>
           <div class="clearfix visible-md-block"></div>
           <div class="col-sm-6 col-md-4"><p>Box 7</p></div>
           <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
           <div class="clearfix visible-sm-block"></div>
           <div class="col-sm-6 col-md-4"><p>Box 9</p></div>
           <div class="clearfix visible-md-block"></div>
           <div class="col-sm-6 col-md-4"><p>Box 10</p></div>
           <div class="clearfix visible-sm-block"></div>
           <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
           <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
       </div>
   </div>