[英]How can I make these panels fluid with 100% height without giving fixed height
[英]How can I make fixed height panels in bootstrap?
这是我想要的图像:
如何为所有面板设置固定的引导面板高度?
<div class="col-md-3 padding-0"> <div class="panel panel-default"> <div class="panel-body" style="min-height: 10px; max-height: 10px;"> <img class="img-responsive" src="images/artgram.png" alt=""> <p>Have you ever been in a company's reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better? Have you ever been in a company's reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p> </div> </div> </div> <div class="col-md-3 padding-0"> <div class="panel panel-default"> <div class="panel-body" style="min-height: 10px; max-height: 10px;"> <img class="img-responsive" src="images/artgram.png" alt=""> <p>Have you ever been in a company's reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p> </div> </div> </div>
使用固定height
和隐藏overflow
.panel-body {
height: 100px; // or whatever
overflow: hidden;
}
或在加载后使用JS动态为所有面板分配最大渲染高度。 在这里,请参阅我的回答,以获取类似的问题。 该代码段复制到下面
var panels = document.getElementsByClassName('panel-body'); var maxHeight = Array.prototype.map.call(panels, function(panel) { return parseInt(getComputedStyle(panel).height, 10); }) .reduce(function(a, b) { return Math.max(a, b); }); for (var i = panels.length; i-- > 0;) { panels[i].style.height = maxHeight + 'px'; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> <div class="panel-footer">Panel Footer</div> </div> </div> <div class="col-md-6"> <div class="panel panel-default col"> <div class="panel-heading">Panel Heading</div> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> <div class="panel-footer">Panel Footer</div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.