使用Bootstrap中的按钮填充整个框

Question

问题

使用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区域，并且按钮可以单击。

Answer 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

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