Question

我正在制作一个带引导程序的网站。从主题获得元素并使用它。元素是左边的图片和右边的文字。这也适用于平板电脑和手机。现在我已将元素更改为左侧的文本和右侧的图片。但是这部分响应式设计不再适用。无法弄清楚为什么。这是网址click

在我更改元素的部分，缩放到平板电脑或手机尺寸时图片消失

Answer 1

所以我认为这是一个非常好的网页。而且我确实理解为什么这个例子不能完全适合JSfiddle，也不能轻易地将它推到一个最小的例子中。

当你去一个狭窄的显示设备时，我确实看到了图像消失的问题。所以我认为你的问题就在这里......

<style type="text/css">
    .no-padding.img-2 {
        background: url(http://fakeimg.pl/300/) scroll center no-repeat;
        background-size: cover;
        position: absolute;
        height: 100%;
    }

    .no-padding.img-3 {
        background: url(http://fakeimg.pl/300/) scroll center no-repeat;
        background-size: cover;
        height: 560px;
    }
</style>

Image-2是你的图像被推左执行，Image-3是你的图像推送正确的实现。他们肯定没有相同的CSS ......我认为同样的问题也与你的匹配块文本有关。 Position: Absolute，Height:100%与固定像素高度将导致奇数输出。

我也不理解左/右元素之间的类选择：

<div class="col-sm-6 no-padding img-2 ">

VS

<div class="col-sm-6 col-sm-offset-6 no-padding gray">

为什么.col-sm-offset-6甚至在那里？ Reference here. .col-sm-offset-X类强制事物转到偏移量，在这种情况下它将元素推到屏幕的右侧，但如果你有一个宽度像素问题，那么它弹出元素上下，这可能会变得丑陋。为什么不让一切都浮起来？

简短回答。

丢失.col-sm-offset-6清理图像的CSS（丢失position: absolute）在浏览器中正常工作。

编辑。哎哟。直到现在我才看到@AndyHolmes的评论。我正忙着测试并写下这个答案。看起来他打了我一分钟。

Answer 2

遗憾的是，我认为接受的答案并不能确定您的布局存在的真正问题，并且本身会引入更大的问题，例如需要手动设置heights图像容器。

（我在this JSFiddle）

中复制了原始问题

您的问题可以简化为在两个相邻的浮动列上设置相等高度的问题。这是设计领域中一个众所周知的问题，这个主题由Chris Coyer在this post中解决。

我得出结论，你可以对这个问题采取略微不同的方法。通过首先使用移动设备，您可以让您的生活更轻松，并减少代码量。您首先构建基本的1列布局，这里您唯一需要假设的是图像容器的height 由于这是1列布局，因此最好在此处修复height图像，因为它们不依赖于相邻列的height。

要增加视口的大小，您将使用媒体查询来设置断点，其中1列布局变为2列布局，两列彼此相邻设置。现在，这就是您遇到相同高度列的问题。一方面，您希望background image容器以与其他列内容增长相同的方式垂直增长。

如果您只想使用它，flexbox即可解决问题。它的作用是自动等于两列高度，这使您无需手动设置每个图像容器heights，我认为这很棒。您将获得灵活，流畅且移动优先的布局，只需最少量的代码（并且不依赖于引导程序，这在我看来总是一个奖励），它可以适合任何给定数量的内容。

我在这个最小JSFiddle中简化并复制了所需的布局，因此请随意根据您的需要进行调整。

.row {
  display: block;
  overflow:hidden;
  background: #f0f0f0;
  width:100%;
  margin-bottom:10px;
}
.bgImg,
.text {
  width:100%;
}
.bgImg {
  background: url("http://placehold.it/350x150") no-repeat center center;
  background-size: cover;
  height: 150px;
}
h4 {
  margin-top:0;
}

@media (min-width: 768px) {
  .row {
    display:flex;
  }
  .bgImg,
  .text {
    width:50%;
    float:left;
  }
  .bgImg {
    height: initial;
  }
}

<section class="row">
  <div class="bgImg"></div>
  <article class="text">
    <h4>Blah</h4>
    <p>Some nonsense</p>
  </article>
</section>
<section class="row">
  <article class="text">
    <h4>Blah</h4>
    <p>Some nonsense</p>
    <p>Some nonsense</p>
    <p>Some nonsense</p>
    <p>Some nonsense</p>
    <p>Some nonsense</p>
    <p>Some nonsense</p>
  </article>
  <div class="bgImg"> </div>
</section>
<section class="row">
  <div class="bgImg"></div>
  <article class="text">
    <h4>Blah</h4>
    <p>Some nonsense</p>
    <p>Some nonsense</p>
    <p>Some nonsense</p>
  </article>
</section>

响应式设计破碎

2 个答案: