【发布时间】：2016-05-16 16:50:47
【问题描述】：
我在让 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 上该怎么做——它们是否进入外部资源？如果是，如何？
非常感谢！希望我能学会这一点，并在一些帮助下搞清楚！
【问题讨论】：
标签： html css twitter-bootstrap responsive-design grid-layout