Question

我在引导程序中使用井进行卡/网格布局。我的问题是按钮需要始终定位在井的底部，井的高度固定。按钮位于底部，但也与文本重叠。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

确保点击显示整页。该按钮与某些文本重叠。我需要做些什么来使文本定位在哪里以避免与按钮接触？改变高度会稍微修正一下，但需要保持这个高度。

Answer 1

如果您希望修复每个well课程高度，则还需要将btn-purple课程中的每个课程移到well课程之外。另外，要保留当前布局的外观，请将well类中的一些css属性放到col-sm-12类（父容器）

以下是一个指导您的示例jsfiddle：https://jsfiddle.net/u7ecv316/1/

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

希望这会很好地指导你

Bootstrap按钮是重叠文本

1 个答案: