如何使 img-list 在桌面上保持在一行但在移动设备上下拉

Question

我在制作响应式图像列表时遇到了一些问题。我的目标是：

桌面分辨率 1000px 及更高：
- 我需要一行永不换行且始终适合的图像。我可以用这个来完成：

HTML

  <div id="partners" class="col-md-6">
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
  </div>

CSS

#partners {
  background-color: #eee;
  white-space: nowrap;
  width: 100%;
  display: table;
}

.logo-image {
  vertical-align: middle;
  display: table-cell;
  border: solid 1px #F00;
}

.logo-image img {
  max-width: 100%;
}
@media (min-width:1000px) {
#partners {

}

.logo-image {

}
}

在较小的屏幕上：
- 块下降（响应）

但是当用户在移动设备上访问此页面时，这些块会变小。所以我试图使图像保持正常大小，然后在屏幕 width 小于 1000px 时通过删除伙伴 css 来下拉，但这似乎不起作用。

  @media (max-width:1000px) {
    #partners {

    }

    .logo-image {

    }
    }

这是我的 fiddle

到目前为止，我整个星期都在尝试，但无能为力，目前我不确定是否可以完成。

Answer 1

这是您的 Fiddle 的简化版本，仅使用 float:left/none

#partners {
  background-color: #eee;
}
img {
  float: left;
  border: solid 1px red !important;
}
@media (max-width: 1000px) {
  img {
    float: none;
    display:block;
    margin:auto
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div id="partners" class="col-xs-12 col-md-12">
      <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
      <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
      <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
      <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
      <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
      <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
  </div>

Answer 2

您可以简单地使 display: block; 删除内联显示。

在此处查看更新后的代码：

#partners {
  background-color: #eee;
  white-space: nowrap;
  width: 100%;
  display: table;
}

.logo-image {
  vertical-align: middle;
  display: table-cell;
  border: solid 1px #F00;
}

.logo-image img {
  max-width: 100%;
}
@media (max-width:1000px) {
#partners {
 
}

.logo-image {
float:left;
}
}

  <div id="partners" class="col-md-6">
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img src="http://placehold.it/120x80" alt="Placeholder Image" />
    </div>
  </div>

如何使 img-list 在桌面上保持在一行但在移动设备上下拉

how to make img-list stay on one line in desktop but drop down on mobile devices

html

css

media-queries

twitter-bootstrap

twitter-bootstrap-3