Question

第一次跳回html5和css3并使用bootstrap（遗憾的是我不完全确定如果我们使用的是Bootstrap 4或其他版本，请耐心等待。）

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

我不希望这种情况发生。我试图找到一种方法来根据用户屏幕的宽度调整图像的大小。如果我可以使这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

使图像成为您正在使用的列的全宽，因此如果您有像

这样的标记

<div class="row">
   <div class="col-xs-12 col-md-4">
      <img src="..."/>
   </div>
   <div class="col-xs-12 col-md-4">
      <img src="..."/>
   </div>
   <div class="col-xs-12 col-md-4">
      <img src="..."/>
   </div>
</div>

您可以将图像设置为：

.row .col-md-4 img {
   max-width: 100%;
   width: 100%;
}

Answer 2

为什么不为第3列col-xs-4 col-sm-4 col-md-4 col-lg-3内的图像创建另一个网格结构，以便将所有三个图像包装成一行，并将img-responsive类添加到所有{{1}标签让他们反应灵敏。

检查以下代码段：

img

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

防止bootstrap网格中的图像溢出

2 个答案: