水平显示图像不起作用[关闭]答案

【问题标题】：displaying images horizontally is not working [closed]水平显示图像不起作用[关闭]
【发布时间】：2014-12-09 16:16:55
【问题描述】：

我正在尝试水平显示图像，但它不适合我。我想并排显示 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>

【问题讨论】：

说真的，谁赞成这个？ 仅供参考： <img>s 是行内元素，它们像文字一样彼此相邻。这意味着您不必将每一个都放在单独的列中。而且TWBS里没有col-md-1.5这样的东西。
请向我们展示您的 css 代码。
也发布你的 CSS ......
我没有任何 CSS
@HashemQolami 很好，当一行中有八个时，我该如何划分它们......（编辑）......我明白了

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如 cmets 中所述，没有列类等于 12.5% 或 100% 的 1/8。图像自动内联。为了使这些图像在最小宽度为 992px (col-md-x) 的单行上，这是一种方法。如果您在这些周围使用 .thumb 类，则需要将其更改为 inline-block 或 inline 因为 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>

【讨论】：

哇，非常感谢！我完全明白我做错了什么......
添加高度：自动为ie。在你走远之前可能想在 ie8 中进行测试。