Question

我想要每行三张图片...

<div class="row">
<div class="col-lg-4">
  <div class="thumbnail">
    <img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  </div>
</div>
<div class="col-lg-4">
  <div class="thumbnail">
    <img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  </div>
</div>
<div class="col-lg-4">
  <div class="thumbnail">
    <img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  </div>
</div>

我希望它在边框内，并且所有图像都应该具有相同的大小（每行三张）...但是它不是..帮助...

Answer 1

您需要做的是从图像URL中删除&w=500，以便它们缩放到Bootstrap网格的动态宽度，还可以将列上的类更改为col-md-4或{ {1}}，以确保图像在较小的屏幕上彼此相邻。

col-sm-4

如果您希望所有三个图像都具有相同的高度，则可以执行以下操作：

<div class="row">
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1">
        </div>
    </div>
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1">
        </div>
    </div>
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1">
        </div>
    </div>
</div>

要实现真正的动态均匀性，您应该考虑使用Bootstrap 4 card groups。

Answer 2

您有<div class="thumbnail">，但是the built-in bootstrap 3 thumbnail classname是<div class="img-thumbnail">。

您说您希望所有图像的大小均相同，但是图像的比例不同。它们的像素大小是：500x333、500x750和500x375。您到底想要什么行为？您可以通过为height=500px; width=500px;设置添加样式来将它们的高度和宽度都设置为相同，但是图像将变形并被压扁。

我遇到了bootstrap 3 CSS class =“ thumbnail”的问题

2 个答案: