col-xs 中的引导网格对齐问题

Question

我正在构建一个布局，其中包含嵌套在 Bootstrap 列中的方形尺寸比例图像。 这在桌面上运行良好，但在调整浏览器大小时在移动设备上失败。 你可以在753px-618px之间看到我的意思http://www.bootply.com/yuxNss81CC

这是由于列没有保持图像宽度造成的，而这是正常行为>768px

我做了一些测试，这似乎不是我的 CSS 引起的问题。 正如你可以想象的那样，这与 :hover 效果一样简单。 这不是我第一次遇到这个问题，我感到很沮丧。 你知道它为什么会这样吗？

Answer 1

我发现很难理解你到底想要什么，但有一些建议。

首先不要碰 Bootstrap 的网格类（例如 .more-pad 和 .padding-fix-left 类，除非你绝对需要。你可能会破坏它的行为。

在这种情况下，我的想法是，您希望在响应的列内有一个居中的图像。尝试添加 .img-responsive 类以使其成为响应式图像。因为它不会变得大于 300px，所以用 <div> 包围它，它要么具有 max-width: 300px 和 margin: 0 auto 以使其在列中居中，要么使其成为 display: inline-block 并将 text-center 类添加到列中（我在我的示例中选择了后者）。将<div> 设置为position: relative 以允许文本位于图像顶部。

看这个例子：

.btn-image {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  text-align: start;
}
.btn-image__text {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  color: white;
  font-size: 1.5em;
}
.btn-image:hover .btn-image__text {
  background-color: blue;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-3 text-center">
      <div class="btn-image">
        <div class="img-background">
          <img src="http://placehold.it/300/888888" class="img-responsive">
        </div>
        <div class="btn-image__text">
          <p>Hello!</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 text-center">
      <div class="btn-image">
        <img src="http://placehold.it/300/666666" class="img-responsive">
        <div class="btn-image__text">
          <p>Hello</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 text-center">
      <div class="btn-image">
        <img src="http://placehold.it/300/888888" class="img-responsive">
        <div class="btn-image__text">
          <p>Hello...</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 text-center">
      <div class="btn-image">
        <img src="http://placehold.it/300/666666" class="img-responsive">
        <div class="btn-image__text">
          <p>uhm..hello?</p>
        </div>
      </div>
    </div>
  </div>
</div>