jquery - 防止 Bootstrap 网格中的图像溢出

Question

回到 html5 和 css3 并第一次使用 bootstrap(不幸的是，我不确定我们使用的是 Bootstrap 4 还是其他版本，请耐心等待)。

为了在我的网站上制作页脚，我使用了一个可以调整以适应较小屏幕的网格。页脚由只有 3 列的网格组成(因此基本上将页脚分成 3 个相等的部分) 当我的屏幕/页脚宽度减小到 850 像素以下时，第一列就会出现问题。 第一列目前有 3 张图片，都是 Logo 。当屏幕缩小超过 850 像素的宽度时，该列会溢出。前 2 个图像是可见的，但第三个(也是最宽的)溢出并低于前 2 个图像，不再可见。所有图像的高度都相同。

我不希望这样的事情发生。我试图找到一种方法来根据用户屏幕的宽度调整图像的大小。如果我能让这 3 张图像随屏幕尺寸缩放，那将是理想的，这样随着宽度的减小，图像也会变小。 尝试查看是否有类、属性或选择器可以帮助我解决这种情况。否则，我想我必须重新格式化页脚，以便在屏幕达到一定宽度时不再使用网格格式，并且只需将图像彼此对齐。

谢谢。

编辑:包含 3 张图像的网格列当前看起来像这样。我认为 CSS 不值得包含在这里，特别是因为除了改变图像高度之外没有做太多的样式。

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3">
    <p class="text-center"> 
        <a href="http://dcc.dickinson.edu"><img id="DCC-logo" class="img-fluid" src="/static/images/DCC-logo.png"></img></a>
        <a href="http://www.cipl.ulg.ac.be/Lasla/"><img id="LASLA-logo" class="img-fluid" src="/static/images/LASLA-logo.png"></img></a>
        <a href="http://tdh.brynmawr.edu/"><img id="TriCoDH-logo" class="img-fluid" src="/static/images/TriCoDH-logo.png"></img></a>
    </p>
</div>

Answer 1

为什么不为第 3 列 col-xs-4 col-sm-4 col-md-4 col-lg-3 中的图像创建另一个网格结构，以便所有三个图片会自动换行，同时给所有的img标签添加img-responsive类来让它们响应。

检查下面的片段:

@media (max-width:767px){
  .p5.col-xs-4{
    padding: 0 5px;
  }
  .m5.row{
    margin: 0 -5px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3">
    <div class="row text-center m5"> 
    <div class="col-xs-4 p5">
        <a href="http://dcc.dickinson.edu"><img id="DCC-logo" class="img-responsive" src="http://placehold.it/150x150"></a></div>
        <div class="col-xs-4 p5">
        <a href="http://www.cipl.ulg.ac.be/Lasla/"><img id="LASLA-logo" class="img-responsive" src="http://placehold.it/150x150"></a></div>
        <div class="col-xs-4 p5">
        <a href="http://tdh.brynmawr.edu/"><img id="TriCoDH-logo" class="img-responsive" src="http://placehold.it/150x150"></a></div>
    </div>
</div>