Question

我正在尝试水平显示图像，但这对我不起作用。我希望彼此相邻显示8张图像。我知道我的网格系统出了问题。现在他们正在一个低于另一个显示，我希望他们是水平的。如果我col-md-1或col-md-2，它就会关闭。我该如何解决？提前谢谢！

这就是我所拥有的。

  <div class="row">

  <div class="col-md-1.5">
    <div class = "thumbnail">
      <img src="pics/LogoIcon01_over.png" alt="160x66" >
    </div>
  </div>
  <div class="col-md-1.5">
    <div class = "thumbnail">
      <img src="pics/LogoIcon02_over.png" alt="160x66" >
    </div>
  </div>
  <div class="col-md-1.5">
    <div class = "thumbnail">
      <img src="pics/LogoIcon03_over.png" alt="160x66" >
    </div>
  </div>
  <div class="col-md-1.5">
    <div class = "thumbnail">
      <img src="pics/LogoIcon04_over.png" alt="160x66" >
    </div>
  </div>
   <div class="col-md-1.5">
    <div class = "thumbnail">
      <img src="pics/LogoIcon05_over.png" alt="160x66" >
    </div>
  </div>
  <div class="col-md-1.5">
    <div class = "thumbnail">
      <img src="pics/LogoIcon06_over.png" alt="160x66" >
    </div>
  </div>
  <div class="col-md-1.5">
    <div class = "thumbnail">
      <img src="pics/LogoIcon07_over.png" alt="160x66" >
    </div>
  </div>
   <div class="col-md-1.5">
    <div class = "thumbnail">
      <img src="pics/ViewBrandsButton.png" alt="160x66" >
    </div>
  </div>

  </div>

Answer 1

正如评论中所解释的，没有列类等于100％的12.5％或1/8。图像是自动内联的。为了使这些图像在最小宽度为992px（col-md-x）的单行上，这是一种方法。如果在这些周围使用.thumb类，则需要将其更改为内联块或内联，因为div是块元素。

演示：http://jsbin.com/yivavo/1/

<强> CSS：

.my-images {font-size:0;}/*remove white space for inline elements */
.my-images img {padding:2px}

@media (min-width:992px) {
  .my-images img {width:12.5%;height:auto;}  
}

<强> HTML

   <div class="my-images text-center">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
   </div>

水平显示图像不起作用

1 个答案: