Bootstrap 3 |响应列宽度和高度

Question

我是第一次在 Bootstrap 页面上工作。曾经在 HTML/CSS 工作，但不是 bootstrap。我在以下方面遇到了一些困难：

我创建了一个跨 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

Bootstrap 3 |响应列宽度和高度

Bootstrap 3 | Responsive col width and height

html

css

twitter-bootstrap-3