javascript - bootstrap 正方形和矩形响应具有相同的高度

Question

是否有可能通过 css 在 bootstrap 的一行中有一个正方形和一个具有相同高度的矩形？我需要 javascript 来实现这个目标还是我可以只用 css？像这样的 http://codepen.io/mp1985/pen/VvrWbQ但如您所见，这 2 个元素的高度不同。

<div class="col-sm-8">
     <div class="rect-responsive">
          <div class="content">
               Hello rectangle
          </div>
     </div>
</div>
<div class="col-sm-4">
     <div class="square-responsive">
          <div class="content">
               Hello square
          </div>
     </div>
</div>

Answer 1

我在 here 某处看到了类似的问题。您可能会发现它很有用。

不是一个确切的解决方案，但你也可以尝试这样的事情:

<style type="text/css">
    div[class*="col-"] > .square-responsive,
    span[class*="col-"] > .square-responsive,
    ol[class*="col-"] > .square-responsive,
    ul[class*="col-"] > .square-responsive,
    li[class*="col-"] > .square-responsive{
        padding-bottom:100%; 
    }
    div[class*="col-"] > .rect-responsive,
    span[class*="col-"] > .rect-responsive,
    ol[class*="col-"] > .rect-responsive,
    ul[class*="col-"] > .rect-responsive,
    li[class*="col-"] > .rect-responsive{
        padding-bottom:50%;
    }
    .square-responsive,
    .rect-responsive{
         position:relative; 
         overflow:hidden;
         background-color: red;
    }
    .square-responsive > *,
    .rect-responsive > *{
        position:absolute; 
    }
    .square-responsive > .content,
    .rect-responsive > .content {
        width:100%;
        height:100%;
    }
</style>


<div class="row">
    <div class="col-sm-6">
         <div class="square-responsive">
              <div class="content">
                   Hello
              </div>
         </div>
    </div>
    <div class="col-sm-6">
         <div class="square-responsive">
              <div class="content">
                   Hello
              </div>
         </div>
    </div>
</div>