html - 如何使用 twitter bootstrap 制作带边框的响应列高度？

Question

HTML

    <div class="col-sm-12 wrapper-servicelisting">
                <!--<div class="row">-->
                    <div class="col-sm-3 br">
                        <div class="sub-total-amt">
                            <h5>Sub Total Amount</h5>
                            <div class="subtotalamt">$9.96</div>
                        </div>
                    </div>
                    <div class="col-sm-3 br">
                        <div class="sub-total-amt">
                            <h5>Sales Tax (10%)</h5>
                                <div class="salestax">$0.996</div>
                        </div>
                    </div>
                    <div class="col-sm-3 br">
                        <div class="sub-total-amt">
                            <h5>Total Price</h5>
                                <div class="totalprice">$10.956</div>
                        </div>
                    </div>
                    <div class="col-sm-3 br">
                        <div class="radio">
                            <label><input type="radio" name="optradio">By Paypal</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" name="optradio">By Debit / Credit Card</label>
                        </div>
                        <button type="button" class="btn btn-default checkout pull-right"><i class="fa fa-share"></i> Check Out</button>
                    </div>
                <!--</div>-->
            </div>

CSS

      .col-sm-12.wrapper-servicelisting {
      border: 1px solid #cf2651;
      color: #000;
      background-color: #ecf0f1;
      height: 125px;
        margin-bottom: 10px;
    /*  padding-top: 25px;
       padding-bottom: 20px;*/
    }
    .col-sm-3.br {
      border-right: 1px solid #cf2651;
      padding-top: 15px;
      padding-bottom: 29px;
    }
    .col-sm-3.br:last-child{
        border-right:none;
        padding-bottom: 0;
    }
    .sub-total-amt h5 {
      font-size: 16px;
    }
    .subtotalamt, 
    .salestax,
    .sub-total-amt {
      font-size: 30px;
        text-align: center;
    }
    button.btn.btn-default.checkout {
      border: 0;
      background-color: #cf2651;
      color: #fff;
      border-radius: 0;
        padding-top: 10px;
    }
    /*plus button*/
    button.btn.btn-default.plusbtn {
     background-color: #6ea840;
    }

我想在不给出任何高度的情况下实现以下目标。我给了高度:

Answer 1

看看at this demo bootply ，它正在使用这个 HTML:

<div class="row wrapper-servicelisting">
  <div class="col-sm-3 br">
    <div class="sub-total-amt">
      <h5>Sub Total Amount</h5>
      <div class="subtotalamt">$9.96</div>
    </div>
  </div>
  <div class="col-sm-3 br">
    <div class="sub-total-amt">
      <h5>Sales Tax (10%)</h5>
      <div class="salestax">$0.996</div>
    </div>
  </div>
  <div class="col-sm-3 br">
    <div class="sub-total-amt">
      <h5>Total Price</h5>
      <div class="totalprice">$10.956</div>
      <div class="totalprice">$10.956</div>
      <div class="totalprice">$10.956</div>
      <div class="totalprice">$10.956</div>
    </div>
  </div>
  <div class="col-sm-3 br">
    <div class="radio">
      <label><input type="radio" name="optradio">By Paypal</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">By Debit / Credit Card</label>
    </div>
    <button type="button" class="btn btn-default checkout pull-right"><i class="fa fa-share"></i> Check Out</button>
  </div>
</div>

还有这个 CSS:

.wrapper-servicelisting [class*="col"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color: #ecf0f1;
    border-right: 1px solid #cf2651;
}

    .wrapper-servicelisting [class*="col"]:last-child {
        border-right: none;
    }

.wrapper-servicelisting {
    overflow: hidden;
    border: 1px solid #cf2651;
}


.sub-total-amt h5 {
    font-size: 16px;
}

.subtotalamt,
.salestax,
.sub-total-amt {
    font-size: 30px;
    text-align: center;
}

button.btn.btn-default.checkout {
    border: 0;
    background-color: #cf2651;
    color: #fff;
    border-radius: 0;
    padding-top: 10px;
}
/*plus button*/
button.btn.btn-default.plusbtn {
    background-color: #6ea840;
}