響應式設計破解

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>