Question

我正在尝试将此grid/Bootstrap示例用作我想要绘制的大量图表的网格布局。

这是我的FIDDLE。在这个例子中，我只使用代表我的图表的占位符。我的问题是如何使图表正确地适合这些插槽？

我知道我可以在此示例中更改图表（{width: 300, height: 240}）或占位符的大小。但我想做相反的事情，并能够更改div容器宽度<div class="container">以适应图表的大小。

还有一个问题是这个html / css适应（响应）屏幕大小，因为如果屏幕尺寸变窄，占位符将变成堆叠。

我理解这个问题可能有点宽泛，但如果可能的话，我会很感激这方面的一些指示。

Answer 1

如果你正在使用bootstrap4为img

添加.img-fluid或.img-responsive for bootstrap3 class

Answer 2

要使列堆栈位于不同的断点，您可以使用相关的修改类。

例如：

<div class="col-12 col-sm-6 col-m-4">
  <a href="https://placeholder.com">
    <img src="">
  </a>
</div>

这会创建一个默认为12列宽度的列（即网格的整个宽度）。在小屏幕尺寸下，列为6列宽，中等大小为4 ...您可以根据需要选择不同的数字。您还可以为更大的屏幕添加类，例如col-lg-3（Grid docs）

您需要做的第二件事是使图像响应。您应该可以将类.img-responsive添加到图片中。（From the docs）。但是，这个类似乎不在你提供的CSS中。我已经手动将它添加到小提琴中。

Answer 3

在所有图片代码中应用style="max-width:100%;"。这将使您的图像适合自适应的引导网格列。