响应式设计破解

Question

我正在使用bootstrap制作网站。从主题中获得元素并使用它。该元素是左侧的图片和右侧的文字。这也适用于平板电脑和手机。 现在我已将元素更改为左侧的文本和右侧的图片。但是这部分响应式设计不再适用。无法弄清楚原因。 这是URL 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% vs固定像素高度将导致奇数输出。

我还不懂的类选择左/右元素之间：

<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列布局，并且两列彼此相邻。现在，这就是您遇到问题的高度相同的列。一方面，您希望您的容器以与其他列内容增长相同的方式垂直增长。

这就是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>