Question

我在my site上有三张图像不是等间隔的。

我想在页面上均匀分布这三个项目。我已经尝试将它们添加到容器中并对它们应用不同的span类，但没有任何乐趣。

解决这个问题的最佳方法是什么，而不会在其他地方造成问题？（例如在较小的设备上）。

enter image description here

<div class="col-1 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
    </a>
        </div>

        <div class="col-5 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
    </a>
        </div>

        <div class="col-8 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
    </a>
</div>

Answer 1

由于您为第二和第三个div提供了不适当的列类，因此图像间隔不均匀。使用col-4作为第二（而不是col-5）和col-7作为第三（而不是col-8）div。

<div class="col-1 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
    </a>
</div>

<div class="col-4 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
    </a>
</div>

<div class="col-7 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
    </a>
</div>

您可能还想为每个div提供额外的填充以获得小分辨率。另外，正如评论中提到的haxxxton，你应该坚持使用标准的bootstarp-3类以获得更好的可用性。

干杯！

Answer 2

你可能喜欢这个JSFiddle中基于flex的解决方案的反应行为： http://jsfiddle.net/6tknc03s/

.container {
    display:flex;
    justify-content:space-around;
    flex-wrap:nowrap;
}

.container img {
    width:100%;
}

我已经在Chrome中测试了这个解决方案，FF和iOS的兼容性要求将供应商特定的前缀添加到我使用过的CSS中。

Answer 3

你最好的选择是将它们放入col-*-4（我选择了sm，但是最适合你的是），并确保将class="img-responsive"添加到img元素，如下所示：

<div class="container">
  <div class="row">

    <div class="col-sm-4">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive">
    </div>

    <div class="col-sm-4">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive">
    </div>

    <div class="col-sm-4">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive">
    </div>

  </div>
</div>

示例：http://www.bootply.com/4lmpKkgENa

Answer 4

试一试。它的工作原理我已经编辑了你的代码并为其添加了样式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
li {
display:inline;
list-style:none;
}
</style>
</head>

<body>

<div class="col-1 row-5 sizex-3 sizey-3">
         <ul>

         <li> <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
    </a>
    </li>





          <li>
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
    </a></li>



         <li>
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
    </a></li>
    </ul>
</div>
</body>
</html>

check this out

Answer 5

试试这个：

 <div class="row>
    <div class-"container">

       <div class="col-lg-4">
          <img src="">
       </div>

       <div class="col-lg-4">
          <img src="">
       </div>

       <div class="col-lg-4">
          <img src="">
       </div>

    </div>
 </div>

同样空间连续3个图像

5 个答案: