我想在一行中显示 5 张图片。所以一行 5 列 对于 5 列，我找到了这个 css
.col-half-offset {
margin-left: 4.166666667%
}
虽然我在 img 元素中添加了 responsive 属性，但它适用于 web 但对于移动设备它没有正确显示，这有什么问题？
这是我的 CSS
.col-xs-2 {
/*background:#00f;
color:#FFF;*/
}
.col-half-offset {
margin-left: 4.166666667%
}
这是我的html
<div class="row">
<div class="col-xs-2 ">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 9001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
<div col-xs-12 class="caption">
<p>ISO 9001:2015 Kalite Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 14001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" class="img-responsive" alt="Lights">
<div col-xs-12 class="caption">
<p>ISO 14001:2015 Çevre Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 27001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
<div col-xs-12 class="caption">
<p>ISO 14001:2013 Bilgi Güvenliği Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/OHSAS 18001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive" style="width:100%;height:100%">
<div col-xs-12 class="caption">
<p>OHSAS 18001:2007 İş Sağlığı Güvenliği Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
</div>
最佳答案
这个怎么样:
在 Bootstrap 4 中，对于 Responsive Image 你必须使用 img-fluid 而不是 img-responsive
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
关于html - 使 bootstrap div 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57697429/