Html 使引导div响应_Html_Css_Bootstrap 4_Responsive Design

Html 使引导div响应

html css bootstrap-4 responsive-design

Html 使引导div响应,html,css,bootstrap-4,responsive-design,Html,Css,Bootstrap 4,Responsive Design,我想在一行中显示5个图像，所以一行5列对于5列，我发现这个css .col-half-offset { margin-left: 4.166666667% } 这对于web来说是可行的，但对于移动设备来说，它并没有正确显示，尽管我在img元素中添加了响应属性，但这有什么问题这是我的 css 这是我的html <div class="row"> <div class="col-xs-2 ">

我想在一行中显示5个图像，所以一行5列对于5列，我发现这个css

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

这对于web来说是可行的，但对于移动设备来说，它并没有正确显示，尽管我在img元素中添加了响应属性，但这有什么问题

这是我的 css

这是我的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中，对于响应图像，您必须使用

img流体

而不是

img响应

<!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>


引导示例

是否希望在mobile中使用相同的输出？一行5列？@Mr.Perfectismist是的……或者可能是5行，但我认为这将很难……这在网络中很好：但在移动中看起来不好……这是我的网站：这不起作用。在你的示例5行5行中……我只想要一行或五列这里是演示它是一行五列。仔细计算。你想要的是给出准确的结果。我想要这个：…用我的代码，这在网络上非常有效，但在移动设备上太难看了。。。用你的代码，它生成这个网页：我想要5个图像与相同的行没有在你的链接403禁止

<!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>