Ist es möglich, unterschiedliche Nummern von <div> Elemente abhängig von der Bildschirmgröße mit Bootstrap?Ändern der Anzahl der Div-Elemente in Zeile basierend auf der Bildschirmgröße mit Bootstrap
Zum Beispiel 4 Spalten pro Zeile auf Desktops.
Dann statt jeder Spalte 100% auf Tablets und Telefone, haben Sie 3 Spalten pro Zeile auf Tabletten. Spalten über 12 in die nächste Zeile schieben, wie unten.
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 | .col-sm-4 |
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 | .col-sm-4 |
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 |
+-----------+-----------+
Ich fand responsive utilities der Bootstrap, wo ich Spalten ein oder nur für bestimmte Bildschirmgrößen verstecken können. Dies würde bedeuten, dass ich Tonnen der Spalten jedoch wiederholen muss (siehe Ausschnitt unten), also hoffte ich, dass es eine sauberere Lösung geben würde.
<!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>Soweit mir bekannt ist, können Sie das enthält .row div nicht auslassen. Es wäre schön, in der Lage zu sein, nur für alle Elemente zu setzen und lassen Sie Bootstrap jedoch viele <div> s bis 12 hinzufügen. Also 4 auf mittleren Bildschirmen, 3 auf kleinen Bildschirmen und 2 auf extra kleinen.
Beachten Sie, dass ich glaube nicht, dass das HTML-Snippet ordnungsgemäß funktioniert, aber es zeigt hoffentlich, was ich meine, eine Spalte zu verbergen und ein Duplikat nur für bestimmte Bildschirmgrößen sichtbar gemacht. – Matt
Ich bin nicht klar, wie das, was Sie fragen, ist anders als Standard-Raster Verhalten einfach durch Angabe mehrerer '. Col - * - * 'Breakpoints und enthält mehr als 12 Spalten in einem einzigen' .row'. Sehen Sie: https://www.bootply.com/Y6d9pZ12Pa –
@RobertC Mein Verständnis war, dass Sie mehrere Haltepunkte zur Größenanpassung von Spalten angeben konnten, aber sie mussten noch 12 in einer Zeile hinzufügen. Wie dies [W3 Schulen Beispiel] (https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_medium&stacked=h), die 2 Spalten hat. Auf Desktops erstrecken sie sich über 6 und 6. Auf kleineren Bildschirmen werden es 3 und 9. – Matt