有没有一种简单的方法可以确保 .well 项目具有相同的高度和宽度，而不管屏幕尺寸如何？答案

【问题标题】：Is there a simple way to ensure .well items have the same height and width regardless of screen size?有没有一种简单的方法可以确保 .well 项目具有相同的高度和宽度，而不管屏幕尺寸如何？
【发布时间】：2016-04-01 10:03:12
【问题描述】：

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

【问题讨论】：

你不能只指定width 和height 使用像素（例如）。
在重新调整大小时（例如在小型平板电脑或手机上）会有响应吗？我认为使用 Bootstrap 的目的是利用它们对各种屏幕尺寸的响应能力。
我没有正确理解您。如果我理解正确，您希望所有.well 的高度和宽度在每个设备中都相同。如果其中一个有更多内容，则其余所有内容都会有一个空间。正确的？你想把它们放在不同的行吗？
抱歉，我可能不太清楚。我希望它们的行为与其他引导元素一样，因此它们在较小的设备上以响应方式运行（例如，堆叠在 iPhone 上，但在笔记本电脑上作为三排）。我希望它们在同一设备上都具有相同的宽度和高度（无论它们的内容如何）。

标签： html css twitter-bootstrap-3

【解决方案1】：

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

我使用 here 提供的信息来完成这项工作 - 我的盒子上的标准行为是在大型设备上具有 33% 的屏幕宽度，在中型设备上具有 50% 的屏幕宽度，在小型设备上具有 100% 的屏幕宽度。很有魅力。

据我所知，它在旧浏览器上不会很有用（我并不特别关心我的项目），但在现代浏览器上它可以按计划工作。

【讨论】：

对于未来的使用和访问者来说，“响应式”布局的关键是使用“媒体查询”。
谢谢克里斯。我认为（像许多新手开发人员一样）我会过度依赖 Bootstrap 框架，而不是了解它能够调整大小等的原因。