Bootstrap 3 五列响应式固定高度和宽度

Question

我正在尝试在 bootstrap 3 中创建一个 5 列响应式布局，但该框会根据内容自动扩展，实际上我需要所有 5 个框的固定宽度和高度，所以所有东西都留在框中，我厌倦了所有代码和参考堆栈溢出

您可以在下面找到 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>

Answer 1

您可以使用 flex 显示并将 height: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%;
}

Answer 2

我最近遇到了同样的问题。我用这个解决了我的问题

将行宽更改为 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>

Answer 3

  var minHeight = parseInt(0);
                $(".tens-columns > div").each(function(){
                    if($(this).outerHeight() > minHeight){
                        minHeight = $(this).outerHeight();
                    }
                });

            $('.tens-columns > div').css('height', minHeight);
            }