我正在尝试在Bootstrap 3中制作5列响应式布局,但是该框会根据内容自动扩展,实际上我需要对所有5个框使用固定的宽度和高度,因此所有内容都保留在该框中,我厌倦了所有代码和参考stackoverflow
在下面,您可以找到HTML和CSS代码
请整页检查代码输出
@media (min-width: 768px) {
.ten-columns > .col-sm-2 {
width: 20%;
}
}
.card-box {
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
background-clip: padding-box;
margin-bottom: 20px;
background-color: #ffffff;
}
.widget-box-one .widget-one-icon {
position: absolute;
right: 30px;
font-size: 72px !important;
top: 0;
color: #f3f3f3;
overflow: hidden;
vertical-align: middle;
line-height: 2 !important;
}
.widget-box-one .wigdet-one-content {
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row ten-columns text-center">
<div class="col-sm-2">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">One</p>
<img style="width:90px" src="https://i.imgur.com/kspWJKK.png">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">Stat</p>
<h2 class="text-danger"><span data-plugin="counterup">I am just a dummy text with max 35 characters</span></h2>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">SPD</p>
<h2 class="text-dark"><span data-plugin="counterup">22</span> </h2>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">D-Goal</p>
<h2 class="text-success"><span data-plugin="counterup">12</span></h2>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">B-Level</p>
<img style="width:90px" src="https://i.imgur.com/kspWJKK.png">
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
您可以使用弹性显示并将高度:100%设置为.card-box
.ten-columns{
/*its like Bootstrap 4*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.ten-columns > .col-sm-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
.card-box {
/*add height:100% to .card-box*/
height: 100%;
}
答案 1 :(得分:0)
我最近遇到了同样的问题。我解决了这个问题
将行宽更改为240%。由于在引导程序行中包含12列,因此要填充相同的宽度(在12列中),会增加行的大小(12/5 = 2.4)。
这里有一个小问题,滚动条是可见的,但在我的.fluid-container中不可见,这可以解决。
@media (min-width: 768px) {
}
.card-box {
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
background-clip: padding-box;
margin-bottom: 20px;
background-color: #ffffff;
}
.widget-box-one .widget-one-icon {
position: absolute;
right: 30px;
font-size: 72px !important;
top: 0;
color: #f3f3f3;
overflow: hidden;
vertical-align: middle;
line-height: 2 !important;
}
.widget-box-one .wigdet-one-content {
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row ten-columns text-center" style="width: 240%">
<div class="col-md-1 col-xs-1">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">One</p>
<img style="width:90px" src="https://i.imgur.com/kspWJKK.png">
</div>
</div>
</div>
<div class="col-md-1 col-xs-1">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">Stat</p>
<h2 class="text-danger"><span data-plugin="counterup">I am just a dummy text with max 35 characters</span></h2>
</div>
</div>
</div>
<div class="col-md-1 col-xs-1">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">SPD</p>
<h2 class="text-dark"><span data-plugin="counterup">22</span> </h2>
</div>
</div>
</div>
<div class="col-md-1 col-xs-1">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">D-Goal</p>
<h2 class="text-success"><span data-plugin="counterup">12</span></h2>
</div>
</div>
</div>
<div class="col-md-1 col-xs-1">
<div class="card-box widget-box-one">
<div class="wigdet-one-content">
<p class="m-0 text-uppercase font-600 font-secondary text-overflow">B-Level</p>
<img style="width:90px" src="https://i.imgur.com/kspWJKK.png">
</div>
</div>
</div>
</div>
答案 2 :(得分:0)
var minHeight = parseInt(0);
$(".tens-columns > div").each(function(){
if($(this).outerHeight() > minHeight){
minHeight = $(this).outerHeight();
}
});
$('.tens-columns > div').css('height', minHeight);
}