Bootstrap 3 |響應列寬度和高度

Question

我正在首次使用Bootstrap頁面。用於在HTML/CSS中工作，所有這些都不是引導程序。我遇到以下問題：

我創建了一個跨越4列的流體（全寬）容器。 第1列再次包含圖像，第2個文本，第3個圖像和第4個文本。下一行的列是交替的。 我希望我的列具有響應的寬度和高度，以便如果我調整視口，柱總是平方並伸展整個頁面。我似乎無法得到這個工作。試過各種各樣的事情。設置最大寬度，使用百分比，背景圖像，縮放到100％等img scr標籤，但似乎沒有任何工作。

任何人都可以告訴我我可以做到這一點嗎？ 非常感謝。沒有問題，如果需要JS或JQuery使其工作。我掌握了基礎知識，所以我知道如果有人指出我在正確的方向（不是JS嚮導自己找出這個問題）。

例如，我提供了我的HTML標記。 CSS非常基礎。只需在ft-img列中提供背景圖像，併爲字體提供一些樣式。另外，目前所有的col都有400像素的固定高度，但這顯然不是要走的路。 ：P

<div class="container-fluid main-content"> 
    <div class="row"> 
     <div class="col-md-3 ft-img ft-1"> 
     </div> 
     <div class="col-md-3 ft-text"> 
     <h1>Heading</h1> 
     <hr> 
     <p>Paragraph </p> 
     </div> 
     <div class="col-md-3 ft-img ft-2"> 
     </div> 
     <div class="col-md-3 ft-text"> 
     <h1>Heading</h1> 
     <hr> 
     <p>Paragraph </p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-3 ft-text"> 
     <h1>Heading</h1> 
     <hr> 
     <p>Paragraph </p> 
     </div> 
     <div class="col-md-3 ft-img ft-1"> 
     </div> 
     <div class="col-md-3 ft-text"> 
     <h1>Heading</h1> 
     <hr> 
     <p>Paragraph </p> 
     </div> 
     <div class="col-md-3 ft-img ft-2"> 
     </div> 
    </div> 
    </div> 

問：這裏是CSS。我最初沒有提供它，因爲它只是基礎知識，它只是我嘗試過的一件事。如上所述。

.ft-img { 
    background-size: 100%; 
    background-position: center center; 
    height: 400px; 
} 
.ft-text { 
    background: url('../img/bg.png'); 
    background-position: 10% 10%; 
    height: 400px; 
    color: #fff; 
    font-family: 'Lato', sans-serif; 
    padding: 40px; 
} 
.ft-text h1 { 
    font-size: 2.5em; 
    font-weight: bold; 
} 
.ft-text p { 
    font-size: 1.2em; 
} 

.ft-1 { 
    background: url('../img/ft/ft-1.jpg') no-repeat; 
} 
.ft-2 { 
    background: url('../img/ft/ft-2.jpg') no-repeat; 
} 

Answer 1

如果您想變得流暢，您不能指定固定單位（px）。

考慮使用vw單位使您的高度相對於它們的寬度保持平方。

http://www.w3.org/TR/css3-values/#viewport-relative-lengths