Bootstrap-Karten/thumbnails nicht Schlange Seite an Seite richtig in das grid-system & Karten-deck
Ich habe ein problem mit dem bekommen von Boostrap ' s miniaturen & Karten line up Seite an Seite in Ihren grid-system. Im Grunde ist dies eine Zuordnung & ich habe zu Folgen, bestimmte Parameter:
-muss die Verwendung von Bootstrap grid-system sm-Größe Spalten
-diese Quadrate der Inhalte (thumbnails oder Karten) müssen stapeln sich gleichmäßig vertikal auf einem mobilen Bildschirm und gleich 3 Plätze nebeneinander für größere Bildschirm
-alles muss von fluid & responsive
-und muss-match-up ein mock-up-Bild, das ich gegeben wurde
Zuerst, ich habe versucht, nur mit Karten, aber Sie haben nicht eine Gliederung wie die Art, wie mein mock-up-Bild ist; dann habe ich versucht mit nur thumbnails, aber Sie hatten nicht stapeln vertikal die Art und Weise, die ich brauchte. Jetzt, mit Karten & miniaturen, Hole ich Sie suchen, wie ich will, optisch & stapeln Sie richtig horizontal für kleinere Bildschirme, aber Sie sind Nicht stapeln side-by-side-wenn ich den Bildschirm größer...
Ich habe noch einen Langen Weg zu gehen, um die Beendigung dieser Aufgabe, die ich wirklich noch haben, um eine Tonne von CSS, aber ich fühle mich wie ersten ich brauche, um dies zu beheben Integrale layout problem/warum sind diese nicht richtig stapeln, wie eine ansprechende Einheit.
Hier sind links zu meinen Geigen:
(meine Letzte Verwendung von Karten & miniaturen):
https://jsfiddle.net/Tamara6666/1n6nau4c/
und den code:
<body>
<main>
<div class="container-fluid">
<div class="row">
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="col-sm-6">
<div class="thumbnail">
<div class="card">
<img class="card-img-top img-responsive" img src="peppers.jpeg" alt="peppers">
<div class="card-block">
<h4 class="card-title">$1.00</h4>
<p></p>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<div class="card">
<img class="card-img-top img-responsive" img src="rasp.jpeg" alt="raspberries">
<div class="card-block">
<h4 class="card-title">$2.50 <br><small>$5.00 Total</small></h4>
<p></p>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<div class="card">
<img class="card-img-top img-responsive" img src="kiwis.jpg" alt="kiwis">
<div class="card-block">
<h4 class="card-title">$.30 <br><small>$2.40 Total</small></h4>
<p></p>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>(meine erste mit nur thumbnails):
https://jsfiddle.net/Tamara6666/5thon1mb/
<body>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="peppers.jpeg" alt="peppers" class="img-responsive">
<div class="caption">
<h3 class="text-left">$1.00</h3>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="rasp.jpeg" alt="raspberries" class="img-responsive">
<div class="caption">
<h3 class="text-left">$2.50 <br><small>$5.00 Total</small></h3>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="kiwis.jpg" alt="kiwis" class="img-responsive">
<div class="caption">
<h3 class="text-left">$.30 <br><small>$2.40 Total</small></h3>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
</div>
</div>
</div>
</div>Aber Weder stapeln oder handeln in einem fluid/responsive Weise Korrekt - alles muss flüssig & jede box muss der Stapel Gleichmäßig nebeneinander in größerer Bildschirm und stack gleichmäßig auf der Oberseite von einander, jede box, die die gesamte horizontale Raum auf einem kleineren Bildschirm. Das erste Beispiel ist näher an, wie muss es Aussehen für kleinere Bildschirme, aber nicht stapeln Seite an Seite in allen...
Dem zweiten beginnt man nebeneinander (aber die Boxen sind nicht gleich), aber es nicht stapeln auf der jeweils anderen korrekt für mobile. Ich fühle mich wie ich brauche zu Sortieren, das layout-problem, bevor ich richtig tief in die css - & andere Elemente dieses Projekts & ich weiß wirklich nicht, warum es nicht funktioniert; ich habe versucht, indem Sie die Karten in einem deck und in einem wrapper, aber das hat nicht funktioniert.
Jede Hilfe wäre Sehr geschätzt, Danke!
**Auch, ich muss in dieser Zuordnung über JSFiddle - weiß jemand, Wie bekomme ich das Img erscheint es? Ich habe gelernt, auf die altmodische html/css, wo du deine img in den Ordner w/Ihren code so, ich bin mir nicht sicher, was zu tun ist, auf JS-Fiddle - gehen Sie in externen Ressourcen & wenn ja, wie?
Vielen Dank! Hoffentlich werde ich lernen, diese & figure it all out, w/Hilfe!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Bist du mit 2 verschiedene Versionen des Bootstrap (Karten sind V4 und Thumbnails V3), aber mit den gleichen CSS-Code für beide (v3.3.6).
Nebenbei bemerkt: wenn Sie brauchen, um Ihre eigenen Bilder auf jsFiddle müssen Sie legen Sie Sie irgendwo zugänglich über das öffentliche internet. ie-web-server etc.
Siehe Beispiel-Snippets.
Bootstrap V4 Karte Grid (Ihre erste jsFiddle)
HTML:
Bootstrap 3 Thumbnail-Raster (Ihre zweite jsFiddle)
HTML:
<br><small>$5.00 Total</small>wie in den anderen zwei Spalten. Ist es das, was du meinst, oder etwas anderes?