Kin*_*R66 1 html css grid-layout responsive-design twitter-bootstrap
我在让 Boostrap 的缩略图和卡片在他们的网格系统中并排排列时遇到了问题。基本上，这是一项作业，我必须遵循某些参数： - 必须使用 Bootstrap 网格系统 sm 大小的列 - 这些内容方块（缩略图或卡片）必须在移动屏幕中垂直堆叠，并且与 3 个方块并排排列大屏幕的一面 - 一切都必须流畅且反应灵敏 - 并且必须与我得到的模型图片相匹配
起初，我尝试只使用卡片，但它们没有像我的模型图片那样的轮廓；然后我尝试只使用缩略图，但它们没有按照我需要的方式垂直堆叠。现在，使用卡片和缩略图，我让它们看起来更像我想要的视觉效果并且它们在较小的屏幕上正确水平堆叠，但是当我使屏幕变大时它们不会并排堆叠......
我还有很长的路要走来完成这项任务，我仍然需要创建大量的 CSS，但我觉得首先我需要解决这个整体布局问题/为什么这些不能作为响应单元正确堆叠。
这里是我的小提琴的链接：（我最后一个使用卡片和缩略图）：https ://jsfiddle.net/Tamara6666/1n6nau4c/
和代码：
<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>
（我的第一个只使用缩略图）：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>
但是，堆叠或以流畅/响应的方式操作都不是正确的 - 一切都必须是流畅的，并且每个盒子都必须在较大的屏幕中并排堆叠并均匀地堆叠在彼此的顶部，每个盒子在较小的屏幕上占据整个水平空间屏幕。第一个例子更接近于它需要如何寻找较小的屏幕，但根本没有并排堆叠......
第二个并排开始（但盒子不相等）但它没有正确地堆叠在移动设备上。我觉得我需要在深入了解这个项目的 css 和其他元素之前解决这个布局问题，我真的不知道为什么它不起作用；我试过把卡片放在一副牌和一个包装纸里，但没有用。
任何帮助将不胜感激，谢谢！
**另外，我必须通过 JSFiddle 上交这个作业——有谁知道我如何让我的 Img 出现在那里？我学习了老式的 html/css，你将 img 放在带有代码的文件夹中，所以我不确定在 JS Fiddle 上做什么 - 它们是否进入外部资源，如果是这样，如何？
多谢！希望我会学习这一点并在一些帮助下解决所有问题！
您正在使用 2 个不同版本的 Bootstrap（卡片是 V4，缩略图是 V3），但两者都使用相同的 CSS（v3.3.6）。
旁注：如果您需要将自己的图像放置在 jsFiddle 上，您需要将它们放置在可通过公共互联网访问的地方。即网络服务器等。
请参阅工作示例代码段。
Bootstrap V4 Card Grid（你的第一个 jsFiddle）
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<main>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#" class="card-link">Card link</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#" class="card-link">Card link</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#" class="card-link">Card link</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#" class="card-link">Card link</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#" class="card-link">Card link</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#" class="card-link">Card link</a>
</div>
</div>
</div>
</div>
</div>
</main>Bootstrap 3 Thumbnail Grid（你的第二个 jsFiddle）
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<main>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x325" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x325" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x325" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x325" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x325" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/750x325" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>
</div>
</main>