如何使用twitter引导使响应列高度与边框一致？
如何使用twitter引导使响应列高度与边框一致？
提问于 2015-05-25 10:40:11
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;
}我想在没有任何高度的情况下实现以下目标。我给出了高度：
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-26 13:56:56
请看一看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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30436438
复制相关文章
相似问题
腾讯云开发者
