在 Bootstrap 中用一个按钮填满整个框答案

【问题标题】：Fill upp an entire box with a button in Bootstrap在 Bootstrap 中用一个按钮填满整个框
【发布时间】：2016-04-04 21:13:47
【问题描述】：

问题

使用 Bootstrap 和自定义 CSS 用按钮覆盖整个框区域。

HTML

<div class="col-md-2">
  <div class="servive-block servive-block-orange">
    <div class="form-group">
      <button type="button" class="btn btn-primary form-control">SÖK</button>
    </div>
  </div>
</div>

CSS

.servive-block {
  padding: 20px;
  color: #000000;
  margin-top: 10px;
  height: 100px;
}

.servive-block-orange {
  background: #e75113;
}

最小工作示例 (MWE)

https://jsfiddle.net/wubegbqb

输出

期望的输出

确保整个蓝色按钮将覆盖 div 区域并且该按钮是可点击的。

【问题讨论】：

如果要盖住盒子，为什么要在盒子上加填充物？

标签： html css twitter-bootstrap button twitter-bootstrap-3

【解决方案1】：

绝对定位应该可以工作：

.servive-block {
  color: #000000;
  margin-top: 10px;
  height: 100px;
  position: relative;
}
.servive-block-orange {
  background: #e75113;
}
.full-size {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="col-md-2">
  <div class="servive-block servive-block-orange">
    <div class="form-group full-size">
      <button type="button" class="btn btn-primary form-control full-size">SÖK</button>
    </div>
  </div>
</div>

Fiddle demo

【讨论】：

【解决方案2】：

如果您在父 div (.servive-block) 上设置了高度和宽度，则可以将按钮设置为 100% 宽度和 100% 高度。

.servive-block {
    padding: 20px;
    color: #000000;
    margin-top: 10px;
    height: 100px;
    width:250px;
 }

.servive-block .form-group {
    width:100%;
   height:100%;
}


.servive-block .form-group .btn {
    width:100%;
    height:100%;
    display:block;
}

【讨论】：

form-group 元素是花生酱中的苍蝇。