Question

我想在一排显示5张图像，所以一排5列对于5列，我发现这个CSS

  .col-half-offset {
            margin-left: 4.166666667%
        }

这适用于Web，但对于移动设备，尽管我向img元素添加了响应属性，但无法正确显示，这是什么问题？

这是我的 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>

Answer 1

如何？

在Bootstrap 4中，对于响应图像，您必须使用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>

https://jsfiddle.net/ilazycoder/9xuym2kj/6/

使bootstrap div响应

1 个答案: