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>

Answer 2

检查这个

CSS：

.rect-responsive {
    background-color: red;
}
.square-responsive {
    background-color: yellow;
}

JS：

$(window).ready(function(){
        $(".square-responsive").height($(".square-responsive").width());
    $(".rect-responsive").height($(".square-responsive").width());
    console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function () {
    $(".square-responsive").height($(".square-responsive").width());
    $(".rect-responsive").height($(".square-responsive").width());
    console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});

<强>样本： JSFIDDLE

＆＃13;

$(window).ready(function() {
  $(".square-responsive").height($(".square-responsive").width());
  $(".rect-responsive").height($(".square-responsive").width());
  console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function() {
  $(".square-responsive").height($(".square-responsive").width());
  $(".rect-responsive").height($(".square-responsive").width());
  console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});

＆＃13;

.rect-responsive {
  background-color: red;
}
.square-responsive {
  background-color: yellow;
}

＆＃13;

<head>
  <title>Example of Twitter Bootstrap 3 Grid System</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <style type="text/css">
    p {
      padding: 50px;
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      background: #f2f2f2;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-8 col-md-8 col-xl-8 col-xs-8">
        <div class="rect-responsive">
          <div class="content">Hello rectangle</div>
        </div>
      </div>
      <div class="col-sm-4 col-md-4 col-xl-4 col-xs-4">
        <div class="square-responsive">
          <div class="content">Hello square</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

引导方形和矩形响应相同的高度

2 个答案: