css - 使用 Bootstrap 面板类的一般良好实践

Question

所以我已经使用 Bootstrap 的面板类几个月了，我无法确定我对面板类所做的是否好。所以我曾经像这样使用面板类

  <div class="container clearfix">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-default">

                    <div class="panel-heading">

                    </div>

                    <div class="panel-body">

                    </div>

                    <div class="panel-footer">

                    </div>

                </div>

            </div>
        </div>
    </div>

我会将面板类包装在 col-md-12 中。
我还发现以下方法有效:

  <div class="container clearfix">
        <div class="row">

                <div class="panel panel-default">

                    <div class="panel-heading">

                    </div>

                    <div class="panel-body">

                    </div>

                    <div class="panel-footer">

                    </div>

                </div>

        </div>
    </div> 

我的问题是对于响应式设计来说哪种方法更好。他们俩似乎都 react 敏捷。是否有必要将面板 panel-default 及其所有内容包装在具有列类的 div 中，或者是否已由具有行类的外部 div 进行处理？

Answer 1

根据 Bootstrap 3 code examples ，panel元素不需要用col-**-*包装器包装并用col-md-12包装code> 没有任何意义，因为默认情况下面板采用 container 宽度的 100%。

但是，如果您希望其宽度不是 100%，而是 33%，则可以将其包装在 col-**-** 类中>。

<强> Bootply example