0
ブートストラップで画面のサイズに応じて異なる数の<div>要素を使用できますか？ブートストラップで画面サイズに基づく行のDiv要素の数を変更する
たとえば、デスクトップの行あたり4列。
+-----------+-----------+-----------+-----------+
| .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
+-----------+-----------+-----------+-----------+
| .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
+-----------+-----------+-----------+-----------+
タブレットと携帯電話の各列のスパンを100％にする代わりに、タブレットに1列に3列の列があります。以下のように、列を12行以上にプッシュします。
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 | .col-sm-4 |
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 | .col-sm-4 |
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 |
+-----------+-----------+
私は唯一特定の画面サイズの列を非表示にしたり、表示することができますブートストラップのresponsive utilitiesを見つけました。これは、私が列のトンを繰り返す必要があることを意味する（以下のスニペットを参照）ので、私はよりクリーンなソリューションがあることを望んでいた。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<p>1</p>
</div>
<div class="col-md-3 col-sm-4">
<p>2</p>
</div>
<div class="col-md-3 col-sm-4">
<p>3</p>
</div>
<div class="col-md-3 hidden-sm">
<p>4</p>
</div>
</div>
<div class="row">
<div class="hidden-md visible-sm-4">
<p>4</p>
</div>
<div class="col-md-3 col-sm-4">
<p>5</p>
</div>
<div class="col-md-3 col-sm-4">
<p>6</p>
</div>
<div class="col-md-3 hidden-sm">
<p>7</p>
</div>
<div class="col-md-3 hidden-sm">
<p>8</p>
</div>
</div>
<div class="row">
<div class="hidden-md visible-sm-4">
<p>7</p>
</div>
<div class="hidden-md visible-sm-4">
<p>8</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>私の知る限り、あなたは含む.row div要素を除外することはできません。すべての要素にclass="col-md-3 col-sm-4 col-xs-6"を入れて、ブートストラップに最大12個を追加することは可能ですが、<div>には12個まで追加できます。したがって、中画面では4、小画面では3、さらに小画面では2です。
htmlスニペットは適切に機能しているとは思わないが、列を非表示にして重複を特定の画面サイズでしか表示できないことを示してくれることを願っています。 – Matt
あなたが何を求めているかは、単に複数の '.col - * - *'ブレークポイントを指定し、単一の '.row'に12個以上のカラムを含むデフォルトのグリッドの動作とは異なります。以下を参照してください：https://www.bootply.com/Y6d9pZ12Pa –
@RobertC私の理解では、複数のブレークポイントを指定して列のサイズを変更することができましたが、まだ1行に12を追加する必要がありました。この[W3 Schools example]（https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_medium&stacked=h）のように、2つの列があります。デスクトップ上では、6と6です。小さい画面では、3と9になります。 – Matt