html - bootstrap 4 容器的固定高度

Question

我有以下 html 结构:

<div class="container" style="background-color:#FFFFFF;height:100px;">
<div class="row hidden-sm-down" style="display:block;height:100px;" align="center">
<a href="http://www.pse.ruhr-uni-bochum.de/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/Logo_RUB_BLAU_cmyk_trans.png"> </a>

<a href="http://www.dokoll.tu-dortmund.de/cms/de/dokoll/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/tud_logo_rgb_tranz.png"> </a>

<a href="https://www.zlb.uni-due.de/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/logo_claim_rgb_72dpi.png"> </a>

<a href="http://zfl.uni-koeln.de/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/07/logo_köln.png"> </a>

<a href="https://www.uni-muenster.de/Lehrerbildung/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/logo_unimünster.png"> </a>        

</div>
</div>

当前，当屏幕变小时，它会将我的图像换行。我需要避免这种情况，让图像变小以适合屏幕宽度。我在小型设备上隐藏了该行，因此它只适用于中型和高端设备。

有什么办法可以解决吗？我尝试了堆栈上的每个解决方案。

Answer 1

你可以使用img-responsive类

<img class="img-responsive" src="yourimageroute">

Check out this fiddle