我在获取Boostrap的缩略图时遇到问题。卡在他们的网格系统中并排排列。基本上，这是一个任务＆amp;我必须遵循某些参数： - 必须使用Bootstrap网格系统sm-size列 - 这些内容的正方形（缩略图或卡片）必须在移动屏幕中同等地垂直堆叠，并且对于更大的屏幕，并排为3个正方形 - 一切都必须是流动的＆amp;响应 - 并且必须匹配我给出的模拟图片
起初，我尝试过只使用卡片，但它们没有像我的模型图片那样的轮廓;然后我尝试只使用缩略图，但它们没有按我需要的方式垂直堆叠。现在，使用卡片＆amp;缩略图，我让他们看起来更像我想要的视觉和放大它们在较小的屏幕上水平堆叠，但是当我将屏幕放大时，它们并不是并排堆叠......
我还有很长的路可以完成这项任务，我仍然需要创建大量的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＆amp; s之前，我觉得我需要解决这个布局问题。该项目的其他要素＆amp;我真的不知道它为什么不起作用;我已经尝试将这些卡放在一个卡座和一个包装中，但这不起作用。
非常感谢任何帮助，谢谢！
**另外，我必须通过JSFiddle来完成这项任务 - 有谁知道我如何让我的Img出现在那里？我在老式的html / css上学到了你把你的img放在你的代码的文件夹中，所以我不确定如何在JS Fiddle上做什么 - 他们是在外部资源和如果是这样，怎么样？
非常感谢！希望我能学习这个＆amp;把它全部用来帮忙！
答案 0 :(得分：2)
你使用的是2个不同版本的Bootstrap（卡片是V4，缩略图是V3），但两者都使用相同的CSS（v3.3.6）。
旁注：如果您需要将自己的图像放在jsFiddle上，则需要将它们放在可通过公共互联网访问的地方。即网络服务器等。
参见工作示例片段。
Bootstrap V4卡网格（您的第一个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缩略图网格（您的第二个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>
答案 1 :(得分：0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="col-sm-4">
<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>
<!--card-block-->
</div>
<!--card-->
</div>
<!--thumbnail-->
</div>
<!--col-sm-6-->
<div class="col-sm-4">
<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>
<!--card-block-->
</div>
<!--card-->
</div>
<!--thumbnail-->
</div>
<!--col-sm-4-->
<div class="col-sm-4">
<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>
<!--card-block-->
</div>
<!--card-->
</div>
<!--thumbnail-->
</div>
<!--cols-m-4-->
</div>
<!--card-check-->
</div>
<!--card-deck-wrapper-->
</div>
<!--row-->
</div>
<!--container-fluid-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>