我有一个带有4个引导面板的页面,应该是一个基本的演练。
我的要求:
对于大屏幕,面板必须并排放置,但它们必须具有响应性,并且随着屏幕变小并切换到垂直方向。
面板高度必须一致
面板必须有一个正确的标题栏
我现在要解决的问题是,我可以用下面的代码解决前两个问题,但这会留下面板的奇怪标题,它不会一直延伸到整个面板,如下所示。
这是我的代码,它产生了这个问题。
HTML格式
<div class="container-fluid">
<h3>Title!</h3>
<hr />
<div class="flexbox">
<div id="box1" class="panel panel-default panel-wizard col-lg-3">
<div class="panel-heading">
<h4>Step 1</h4>
</div>
<div class="panel-body">
<p> Blah. Blah....</p>
</div>
</div>
<div id="box2" class="panel panel-default panel-wizard col-lg-3">
<div class="panel-heading">
<h4>Step 2</h4>
</div>
<div class="panel-body">
Blah. Blah....
</div>
</div>
<div id="box3" class="panel panel-default panel-wizard col-lg-3">
<div class="panel-heading">
<h4>Step 3</h4>
</div>
<div class="panel-body">
Blah. Blah....
</div>
</div>
<div id="box4" class="panel panel-default panel-wizard col-lg-3">
<div class="panel-heading">
<h4>Step 4</h4>
</div>
<div class="panel-body">
Blah. Blah....
</div>
</div>
</div>
</div>
CSS
div.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
flex-direction: row;
flex-wrap: wrap;
}
div.panel-wizard {
flex: 1 1 auto;
}
JSFIDDLE
似乎我所做的任何尝试和解决问题的小组标题违反了我的另一个要求。
最佳答案
因为默认情况下col-lg-3
有一个左右填充
试试这个
.flexbox .col-lg-3{
padding-left: 0;
padding-right:0;
}
DEMO HERE