bootstrap 4固定高度的容器

时间:2017-09-27 07:30:14

标签: html css twitter-bootstrap responsive-design

我有以下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>

目前,当屏幕变小时,我将图像包装在一个新行中。我需要避免这种情况,让图像变小以适应屏幕的宽度。我将该行隐藏在小型设备上,因此它只适用于中型和高级设备。

有什么方法可以解决这个问题吗?我在堆栈上尝试了每个解决方案

1 个答案:

答案 0 :(得分:1)

您可以使用 img-responsive

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

Check out this fiddle