HTML – 是否有一种简单的方法可以确保.well项目具有相同的高度和宽度,无论屏幕大小如何？

我的主页上有三个.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

解决方法

我设法通过删除井/引导程序标准响应行为并使用Flex方法采用我自己的一些来解决这个问题.如果有人对此感兴趣,那就是bootply： Flex CSS classes to make responsive pages

我使用了目前的信息here来实现这一目标 – 我的盒子上的标准行为是在大型设备上占据屏幕宽度的33％,在中型设备上占50％,在小型设备上占100％.有魅力.

据我所知,它不会对旧版浏览器非常有用(我并不特别关心我的项目),但在现代浏览器上,它的运行方式与计划相符.