我正在尝试使用flexbox网格来提供响应能力，但遇到了这个问题：
网格代码在没有外部div的情况下正常工作，但是当包含在外部div中时（特别是AdminLTE框），它会因未知原因开始包装最后一列。
我尝试更改CSS值，但无济于事。
请查看此JSFiddle链接并告知我需要修复的内容。
Flexbox grid inside AdminLTE box
HTML：
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Top Utilized Call Controls</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<div class="btn-group">
<button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<div class="row">
<div class="col-xs-3">
Test 1
</div>
<div class="col-xs-3">
Test 2
</div>
<div class="col-xs-3">
Test 3
</div>
<div class="col-xs-3">
Test 4
</div>
</div>
<div class="row">
<div class="col-xs-3">
Test 1
</div>
<div class="col-xs-3">
Test 2
</div>
<div class="col-xs-3">
Test 3
</div>
<div class="col-xs-3">
Test 4
</div>
</div>
<div class="row">
<div class="col-xs-3">
Test 1
</div>
<div class="col-xs-3">
Test 2
</div>
<div class="col-xs-3">
Test 3
</div>
<div class="col-xs-3">
Test 4
</div>
</div>
<div class="row">
<div class="col-xs-3">
Test 1
</div>
<div class="col-xs-3">
Test 2
</div>
<div class="col-xs-3">
Test 3
</div>
<div class="col-xs-3">
Test 4
</div>
</div>
<div class="row">
<div class="col-xs-3">
Test 1
</div>
<div class="col-xs-3">
Test 2
</div>
<div class="col-xs-3">
Test 3
</div>
<div class="col-xs-3">
Test 4
</div>
</div>
<div class="row">
<div class="col-xs-3">
Test 1
</div>
<div class="col-xs-3">
Test 2
</div>
<div class="col-xs-3">
Test 3
</div>
<div class="col-xs-3">
Test 4
</div>
</div>
<div class="row">
<div class="col-xs-3">
Test 1
</div>
<div class="col-xs-3">
Test 2
</div>
<div class="col-xs-3">
Test 3
</div>
<div class="col-xs-3">
Test 4
</div>
</div>
<div class="row">
<div class="col-xs-3">
Test 1
</div>
<div class="col-xs-3">
Test 2
</div>
<div class="col-xs-3">
Test 3
</div>
<div class="col-xs-3">
Test 4
</div>
</div>
<div class="row">
<div class="col-xs-3">
Test 1
</div>
<div class="col-xs-3">
Test 2
</div>
<div class="col-xs-3">
Test 3
</div>
<div class="col-xs-3">
Test 4
</div>
</div>
</div>
<div class="box-footer clearfix no-border">
</div>
</div>
CSS：
.box.box-primary {
border-top-color: #3c8dbc;
}
.box {
position: relative;
border-radius: 3px;
background: #ffffff;
border-top: 3px solid #d2d6de;
margin-bottom: 0px;
height: 100%;
width: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.box-header.with-border {
border-bottom: 1px solid #f4f4f4;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
}
.no-padding {
padding: 0px !important;
}
.box-body {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 0px;
}
.no-border {
border: 10px !important;
}
.box-footer {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top: 1px solid #f4f4f4;
padding: 10px;
background-color: #ffffff;
}
提前致谢。
答案 0 :(得分：0)
这对我有用：
.row {
flex-wrap: nowrap;
}