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