html - Bootstrap 按钮是重叠文本

Question

我正在使用 bootstrap 中的井制作卡片/网格布局。我的问题是按钮需要始终位于井的底部，并且井具有固定的高度。按钮位于底部，但也与文本重叠。

body {
  background-color: #5C67B6;
}

html,
body {
  height: 100%;
  padding-top: 70px;
}

.btn-purple {
  color: #fff;
  background-color: #5C67B6;
  border-color: #5C67B6;
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -140px;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
  color: #fff;
  background-color: #4b5496;
  border-color: #4b5496;
}

.customClass {
  width: 700px;
  max-width: 100%;
  margin: 0px auto;
}

.well {
  min-height: 280px;
  height: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container content-sm customClass">
  <div class="row">
    <div class="col-sm-6 col-xs-12">
      <div class="well">
        <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80">
        <h3 style="text-align: center;">Test123</h3> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
      </div>
    </div>
  </div>
</div>

确保点击显示整页。该按钮与一些文本重叠。我需要做什么才能使文本定位到避免与按钮接触的位置？更改高度可以稍微修复它，但它需要保持在这个高度。

Answer 1

如果您希望固定每个 well 类的高度，您需要将每个 btn-purple 类移到 well类也是如此。此外，要保留当前布局的外观，请将 well 类中的一些 css 属性放置到 col-sm-12 类(父容器)

这是一个示例 jsfiddle 来指导您:https://jsfiddle.net/u7ecv316/1/

注意:我在 col-sm-12 中放置了一个 col-item 类，然后放置了 btn-purple 在 well 类之外。我也覆盖了 well 类的 css 属性。

希望这对你有帮助