Question

我第一次在Bootstrap页面上工作。用于在HTML / CSS中工作，所有这些都不是引导程序。我对以下内容有些困难：

我创建了一个横跨4列的流体（全宽）容器。第1列包含图像，第2个文本，第3个图像和第4个文本。下一行列是交替的。我希望我的列具有响应的宽度和高度，这样如果我调整视口，则colums总是平方并拉伸整页。我似乎无法让这个工作。试过各种各样的事情。设置最大宽度，使用百分比，背景图像，img scr标签，可扩展到100％等，但似乎没有任何效果。

谁能告诉我如何才能实现这一目标？非常感激。如果需要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 |响应的col宽度和高度

1 个答案: