Question

我有一个包含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

我尝试用面板标题解决问题似乎违反了我的另一个要求。

Answer 1

因为col-lg-3默认情况下有左右填充

试试这个

 .flexbox .col-lg-3{
    padding-left: 0;
    padding-right:0;
    }

<强> DEMO HERE

Bootstrap面板问题 - 面板标题不是全宽？

1 个答案: