有没有简单的方法可以确保无论屏幕大小，.well项的高度和宽度都相同？

Question

有没有简单的方法可以确保无论屏幕大小，.well项的高度和宽度都相同？

4

我在首页有三个.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: 我的尝试。

- Zoinks10

为什么你不能只用像素来指定宽度和高度呢（例如）？ - Mosh Feu

在调整大小时（例如在小平板电脑或手机上），它是否具有响应性？我认为使用Bootstrap的重点是利用其对各种屏幕尺寸的响应性。 - Zoinks10

1

我没有正确理解你的意思。如果我理解正确，您希望在每个设备上所有.well的高度和宽度都相同。如果其中一个有更多内容，其余的将会留出空间。对吗？您想让它们保持在不同的行中吗？ - Mosh Feu

抱歉，也许我没有表达清楚。我希望它们像其他Bootstrap元素一样运作，在较小的设备上具有响应性（例如在iPhone上堆叠，但在笔记本电脑上以三行排列）。我希望它们在同一设备上都具有相同的宽度和高度（不考虑它们的内容）。 - Zoinks10

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zoinks10 · Answer 1

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

我使用了这里提供的信息来使其工作-我的盒子上的标准行为是在大设备上占据屏幕宽度的33％，在中等设备上占据50％，在小设备上占据100％。效果很好。

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