html - 有没有一种简单的方法可以确保 .well 元素无论屏幕大小如何都具有相同的高度和宽度？

Question

我的主页上有三个 .well 元素，我不想用内容填充它们只是为了确保它们在每个屏幕上的尺寸都正确。理想情况下，我想要一个 CSS 解决方案，它可以指定它们的高度和宽度彼此匹配，而不管它们在哪个屏幕上显示(并且它们在窗口缩小时正确堆叠。

/* CSS used here will be applied after bootstrap.css */	
#benefit-box-1 {
  padding-top: 1em;
  display: inline-block;
  text-align: center;
  float: left;
}

#benefit-box {
  padding-top: 1em;
  display: inline-block;
  text-align: center;
  float: left;
}

#benefit-box-3 {
  padding-top: 1em;
  display: inline-block;
  text-align: center;
  float: left;
}

#benefit-row-2 {
  margin-top: 1px;
}

.icon-div {
  display:inline-block;
  text-align: centre;
  vertical-align: bottom;
  width: 100%;
  height: 100%;
}

.icon-div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" id="benefit-row">
    <div class="col-md-4" id="benefit-box-1">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-users fa-4x"></i>
          <h1>Collaborate in your sales meetings.</h1>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="benefit-box">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-map-signs fa-4x"></i>
          <h1>Direct your team to the best deals</h1>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="benefit-box-3">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-filter fa-4x"></i>
          <h1>Trust your pipeline forecast</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="row" id="benefit-row-2">
    <div class="col-md-4" id="benefit-box-1">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-bullseye fa-4x"></i>
          <h1>Helps you target the right contacts</h1>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="benefit-box">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-graduation-cap fa-4x"></i>
          <h1>In-built sales training</h1>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="benefit-box-3">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-line-chart fa-4x"></i>
          <h1>Smash your sales targets</h1>
        </div>
      </div>
    </div>
  </div>
</div>  		

我在这里做了一个bootply:My attempts

Answer 1

我设法通过放弃 wells/bootstrap 标准响应行为并采用我自己的一些使用 Flex 方法来解决这个问题。如果有人感兴趣，这里是 bootply:Flex CSS classes to make responsive pages

我使用了目前的信息here为了使这项工作正常进行——我盒子上的标准行为是在大型设备上占屏幕宽度的 33%，在中型设备上占屏幕宽度的 50%，在小型设备上占屏幕宽度的 100%。很有魅力。

据我所知，它在旧版浏览器上不会很有用(我不是特别关心我的元素)，但在现代浏览器上它按计划工作。